重新创建Siri Button Glow动画 [英] Recreate Siri Button Glow Animation

问题描述

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

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?

推荐答案

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

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和CAEmitterLayer类有很多属性，因此请查看文档以获取更多信息。

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

这篇关于重新创建Siri Button Glow动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！