Odtworzyć animację Siri Button Glow

Question

Czy istnieje sposób na powielenie animacji poświaty siri? Wygląda absolutnie cudownie, ale nie mam pojęcia w tej chwili, jak zacząć ... czy są pormy z preformatowanymi online, które są obracane? czy jest to zrobione z CoreAnimation?

Answer 1

Wierzę, że animacja Siri została stworzona przy użyciu CAEmitterLayer i CAEmitterCell, a następnie animowana za pomocą animacji rdzenia, ale mogę być całkowicie błędna. Oto niektóre kod, który imituje efekt:

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

klas CAEmitterCell i CAEmitterLayer mają wiele właściwości więc sprawdź docs o więcej.

Answer 2

Proponuję zrobić to z plikami PNG wyświetlanymi jeden po drugim, aby uzyskać płynną animację. To znacznie łatwiejsze niż programowanie zakodowanej animacji. Przycisk został już odtworzony przez Arron Hunta: Siri Button Photoshop File

Btw. Animacja Sprite jest naprawdę łatwe do wykonania:

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

Źródło: http://www.icodeblog.com/2009/07/24/iphone-programming-tutorial-animating-a-game-sprite/

Answer 3

UIImageView ma właściwość o nazwie animationImages, których można użyć, aby określić listę obrazów, które będą grać w kolejności, jak animowanym GIF . Jest to prawdopodobnie najłatwiejszy sposób, jeśli chcesz dokładnie kontrolować efekt.

Coś podobnego można również zrobić z CoreAnimation za pomocą jednego obrazu i animacji jego właściwości view.transform przy użyciu CGAffineTransformMakeRotation (kąt).