Recreate Siri Button Glow Animation

Question

¿Hay alguna manera de duplicar la animación del botón sir glow? Se ve absolutamente precioso, pero no tengo ni idea en este momento de cómo empezar ... ¿hay png preformateados en línea que se roten? o se hace con CoreAnimation?

Answer 1

Creo que la animación de Siri se hace con CAEmitterLayer y CAEmitterCell y luego se anima con animación central, pero podría estar totalmente equivocado. Aquí hay un código que imita el efecto:

// 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"]; 

clases CAEmitterCell y CAEmitterLayer tienen muchas propiedades a fin de comprobar la documentación para más.

Answer 2

Le sugiero que lo haga con PNG que se muestran uno por uno, de modo que se obtiene una animación suave. Es mucho más fácil que programar una animación codificada. El botón ya ha sido recreado por Arron Hunt: Siri Button Photoshop File

Btw. Una animación de sprites es muy fácil de implementar:

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

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

Answer 3

UIImageView tiene una propiedad llamada animationImages que se pueden utilizar para especificar una lista de imágenes que se reproducirá en secuencia, como un GIF animado . Esa es probablemente la forma más fácil de hacerlo si desea controlar con precisión el efecto.

Algo similar también podría hacerse con CoreAnimation utilizando una sola imagen y animando su propiedad view.transform utilizando CGAffineTransformMakeRotation (ángulo).