重新创建Siri Button Glow动画

是否有任何重复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文件

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

 - (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完成类似的操作。