Воссоздать Siri Button Glow Анимация - PullRequest
Новая
       13

Воссоздать Siri Button Glow Анимация

8 голосов
/ 23 января 2012

Есть ли способ дублирования анимации свечения кнопки Сири?Это выглядит абсолютно великолепно, но я не знаю, как начать ... есть ли в сети предварительно отформатированные PNG, которые вращаются?или это делается с помощью CoreAnimation?

Ответы [ 3 ]

9 голосов
/ 11 мая 2012

Я считаю, что анимация 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 имеют много свойств, поэтому обратитесь к документации для получения дополнительной информации.

6 голосов
/ 23 января 2012

Я предлагаю вам сделать это с PNG, которые отображаются один за другим, чтобы получить плавную анимацию. Это намного проще, чем программировать кодированную анимацию. Кнопка уже была воссоздана Arron Hunt: Файл фотографии Siri Button

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/

1 голос
/ 23 января 2012

UIImageView имеет свойство animationImages, которое можно использовать для указания списка изображений, которые будут воспроизводиться последовательно, например анимированный GIF. Это, наверное, самый простой способ сделать это, если вы хотите точно контролировать эффект.

Нечто подобное можно сделать и с CoreAnimation, используя одно изображение и анимируя его свойство view.transform с помощью CGAffineTransformMakeRotation (angle).

...