Question

是否有任何重复siri按钮发光动画的方法？它看起来绝对华丽，但我现在不知道如何开始......是否有在线预先格式化的旋转？还是用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 Button Photoshop File

顺便说一下。精灵动画很容易实现：

- (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。如果你想精确控制效果，这可能是最简单的方法。

通过使用单个图像并使用CGAffineTransformMakeRotation（角度）设置其view.transform属性，可以使用CoreAnimation完成类似的操作。

重新创建Siri Button Glow动画

3 个答案: