重新创建Siri按钮发光动画

Question

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

- konturgestaltung

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类有许多属性，因此请查阅文档获取更多信息。

- jlajlar

---

self.fireEmitter在这里缺少上下文。 - Pascalius

我在复制代码时忘记编辑那些行了。应该是self.emitterLayer。我已经修复了。 - jlajlar

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/

本教程将向您展示如何使用iPhone SDK中的UIImageView和UIImage类来制作动画游戏精灵。这个教程旨在帮助那些想要进一步了解iPhone游戏开发的人。

- Sbhklr

---

你说得有道理... 因此，实现足够的PNG文件来进行旋转动画是一种方法。我一直认为这些东西应该使用CoreAnimation制作，因为它比较容易修改。这个链接很棒！我会去看看的！ - konturgestaltung

请查看我编辑后的答案，其中包含一个执行精灵动画的示例代码。祝好运。 - Sbhklr

@Lightforce，有没有人有这个PSD文件的一组PNG图像？我不懂如何提取这些图像，因为我没有Photoshop知识。有人能否上传到某个地方，以便每个人都可以使用它。谢谢。 - user1227928

Answer 3

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

使用单个图像并使用CGAffineTransformMakeRotation(angle)动画其view.transform属性也可以通过CoreAnimation实现类似的效果。

- Nick Lockwood

---

这也是我的第一反应...使用渐变和透明度为0的发光图像，形状为圆圈，然后旋转那个东西...但我不确定那是否会产生发光效果...因为它看起来仍然有些静态？ - konturgestaltung

你可能也想随着时间改变alpha值，因此在旋转时淡入淡出alpha值，使其看起来有些脉冲。 - Nick Lockwood