Ricrea Siri Button Glow Animation

Question

C'è qualche modo di duplicazione dell'animazione del pulsante siri glow? Sembra assolutamente stupendo, ma al momento non ho idea di come iniziare ... ci sono png preformattati online che vengono ruotati? o è fatto con CoreAnimation?

Answer 1

Credo che l'animazione Siri sia realizzata con CAEmitterLayer e CAEmitterCell e quindi animata con animazione core, ma potrei sbagliarmi completamente. Ecco un po 'di codice che imita l'effetto:

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

classi CAEmitterCell e CAEmitterLayer hanno molte proprietà in modo da controllare la documentazione di più.

Answer 2

Suggerisco di farlo con PNG che vengono visualizzati uno ad uno in modo da ottenere un'animazione fluida. È molto più semplice della programmazione di un'animazione codificata. Il pulsante è già stato ricreato da Arron Hunt: Siri Button Photoshop File

Btw. Un'animazione sprite è davvero facile da implementare:

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

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

Answer 3

UIImageView ha una proprietà chiamata animationImages che è possibile utilizzare per specificare un elenco di immagini che si giocherà in sequenza, come una GIF animata . Questo è probabilmente il modo più semplice per farlo se vuoi controllare precisamente l'effetto.

Qualcosa di simile potrebbe essere fatto anche con CoreAnimation usando una singola immagine e animando la sua view.transform property usando CGAffineTransformMakeRotation (angle).