重新创建 Siri 按钮发光动画

Question

有没有办法复制 Siri 按钮发光动画？它看起来绝对华丽，但我现在不知道如何开始......是否有在线预格式化的旋转PNG？或者是用CoreAnimation完成的？

Answer 1

我相信 Siri 动画是用 CAEmitterLayer 和 CAEmitterCell 制作的，然后用核心动画制作动画，但我可能完全错了。下面是一些模仿效果的代码：

// 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 和 CAEmitterLayer 类具有许多属性，因此请查看文档以了解更多信息。

Answer 2

我建议您使用一张一张显示的 PNG 来完成此操作，以便获得流畅的动画结果。这比编写编码动画要容易得多。该按钮已由 Arron Hunt 重新创建：Siri 按钮 Photoshop 文件

顺便说一句。精灵动画非常容易实现：

- (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];
}

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

Answer 3

UIImageView 有一个名为animationImages 的属性，您可以使用它来指定将按顺序播放的图像列表，例如动画 GIF。如果您想精确控制效果，这可能是最简单的方法。

类似的事情也可以通过 CoreAnimation 来完成，方法是使用单个图像并使用 CGAffineTransformMakeRotation(angle) 为其 view.transform 属性设置动画。