Recreate Siri Button Glow Animation

Question

Is there any way of duplication the siri button glow animation? It looks absolutely gorgeous, but I have no idea at the moment how to start... are there online preformatted pngs that are rotated? or is it done with CoreAnimation?

Answer 1

I believe that Siri animation is made with CAEmitterLayer and CAEmitterCell and then animated with core animation, but I might be totally wrong. Here's some code that imitates the effect:

// create emitter layer
self.emitterLayer = [CAEmitterLayer layer];
self.emitterLayer.frame = CGRectMake(0, 0, self.view.bounds.size.width,  self.view.bounds.size.height);

self.emitterLayer.emitterMode = kCAEmitterLayerOutline;
self.emitterLayer.emitterShape = kCAEmitterLayerLine;
self.emitterLayer.renderMode = kCAEmitterLayerAdditive;
[self.emitterLayer setEmitterSize:CGSizeMake(4, 4)];

// create the ball emitter cell
CAEmitterCell *ball = [CAEmitterCell emitterCell];
ball.color = [[UIColor colorWithRed:111.0/255.0 green:80.0/255.0 blue:241.0/255.0 alpha:0.10] CGColor];
ball.contents = (id)[[UIImage imageNamed:@"ball.png"] CGImage]; // ball.png is simply an image of white circle
[ball setName:@"ball"];

self.emitterLayer.emitterCells = [NSArray arrayWithObject:ball];
[self.view.layer addSublayer:self.emitterLayer];

float factor = 1.5; // you should play around with this value
[self.emitterLayer setValue:[NSNumber numberWithInt:(factor * 500)] forKeyPath:@"emitterCells.ball.birthRate"];
[self.emitterLayer setValue:[NSNumber numberWithFloat:factor * 0.25] forKeyPath:@"emitterCells.ball.lifetime"];
[self.emitterLayer setValue:[NSNumber numberWithFloat:(factor * 0.15)] forKeyPath:@"emitterCells.ball.lifetimeRange"];


// animation code
CAKeyframeAnimation* circularAnimation = [CAKeyframeAnimation animationWithKeyPath:@"emitterPosition"];
CGMutablePathRef path = CGPathCreateMutable();
CGRect pathRect = CGRectMake(0, 0, 200, 200); // define circle bounds with rectangle
CGPathAddEllipseInRect(path, NULL, pathRect);
circularAnimation.path = path;
CGPathRelease(path);
circularAnimation.duration = 2;
circularAnimation.repeatDuration = 0;
circularAnimation.repeatCount = 3;
circularAnimation.calculationMode = kCAAnimationPaced;
[self.emitterLayer addAnimation:circularAnimation forKey:@"circularAnimation"];

CAEmitterCell and CAEmitterLayer classes have many properties so check out the docs for more.

Answer 2

I suggest you do it with PNGs which are displayed one by one such that a smooth animation results. It's way easier than programming a coded animation. The button has already been recreated by Arron Hunt: Siri Button Photoshop File

Btw. A sprite animation is really easy to implement:

- (void)viewDidLoad {
    [super viewDidLoad];
    NSArray * imageArray  = [[NSArray alloc] initWithObjects:
                            [UIImage imageNamed:@"1.png"],
                            [UIImage imageNamed:@"2.png"],
                            [UIImage imageNamed:@"3.png"],
                            [UIImage imageNamed:@"4.png"],
                            [UIImage imageNamed:@"5.png"],
                            [UIImage imageNamed:@"6.png"],
                            [UIImage imageNamed:@"7.png"],
                            [UIImage imageNamed:@"8.png"],
                            [UIImage imageNamed:@"9.png"],
                            [UIImage imageNamed:@"10.png"],
                            [UIImage imageNamed:@"11.png"],
                            [UIImage imageNamed:@"12.png"],
                            nil];
    UIImageView * ryuJump = [[UIImageView alloc] initWithFrame:
        CGRectMake(100, 125, 150, 130)];
    ryuJump.animationImages = imageArray;
    ryuJump.animationDuration = 1.1;
    ryuJump.contentMode = UIViewContentModeBottomLeft;
    [self.view addSubview:ryuJump];
    [ryuJump startAnimating];
}

Source: http://www.icodeblog.com/2009/07/24/iphone-programming-tutorial-animating-a-game-sprite/

Answer 3

UIImageView has a property called animationImages that you can use to specify a list of images that it will play in sequence, like an animated GIF. That's probably the easiest way to do it if you want to precisely control the effect.

Something similar could also be done with CoreAnimation by using a single image and animating its view.transform property using CGAffineTransformMakeRotation(angle).