Tạo lại Nút Siri Glow Animation

Question

Có cách nào sao chép hoạt ảnh phát sáng nút siri không? Nó trông hoàn toàn tuyệt đẹp, nhưng tôi không có ý tưởng tại thời điểm làm thế nào để bắt đầu ... là có pngs định dạng trực tuyến được luân chuyển? hoặc là nó được thực hiện với CoreAnimation?

Answer 1

Tôi tin rằng hoạt hình Siri được tạo bằng CAEmitterLayer và CAEmitterCell và sau đó hoạt ảnh với hoạt ảnh lõi, nhưng tôi có thể hoàn toàn sai. Dưới đây là một số mã bắt chước hiệu ứng:

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

Lớp CAEmitterCell và CAEmitterLayer có nhiều thuộc tính nên hãy xem tài liệu để biết thêm.

Answer 2

Tôi khuyên bạn nên làm điều đó với PNG được hiển thị từng cái một sao cho kết quả hoạt ảnh mượt mà. Đó là cách dễ dàng hơn so với lập trình một hình ảnh động được mã hóa. Nút đã được tạo lại bởi Arron Hunt: Siri Button Photoshop File

Btw. Một phim hoạt hình sprite là rất dễ dàng để thực hiện:

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

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

Answer 3

UIImageView có một tính chất gọi animationImages mà bạn có thể sử dụng để xác định một danh sách các hình ảnh mà nó sẽ chơi theo thứ tự, giống như một GIF động . Đó có lẽ là cách dễ nhất để làm điều đó nếu bạn muốn kiểm soát chính xác hiệu ứng.

Điều gì đó tương tự cũng có thể được thực hiện với CoreAnimation bằng cách sử dụng một hình ảnh đơn và làm hoạt hình thuộc tính view.transform của nó bằng cách sử dụng CGAffineTransformMakeRotation (góc).