重新創建Siri按鈕輝光動畫

Question

是否有任何重複siri按鈕輝光動畫的方式？它看起來絕對華麗，但我現在不知道如何開始......有沒有在線預格式化的PNG旋轉？還是用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

Btw。一個精靈動畫是很容易實現：

- (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動畫屬性。如果要精確控制效果，這可能是最簡單的方法。

CoreAnimation也可以通過使用單個圖像並使用CGAffineTransformMakeRotation（angle）爲其view.transform屬性設置動畫。