2015-03-29 2 views
1

Я собираюсь открыть меню с круговой анимацией масштабирования. Для этого я сначала устанавливаю маску радиусом с радиусом 0 в начале.CABasicAnimation Circular Mask Show Scaling Path Animation

#define DEGREES_TO_RADIANS(angle) ((angle)/180.0 * M_PI)  
CAShapeLayer *mask = [CAShapeLayer new]; 
mask.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(25, 25) radius:0 startAngle:0 endAngle:DEGREES_TO_RADIANS(360) clockwise:YES].CGPath; 
self.layer.mask = mask; 

Затем я оживляю новую маску с помощью CABasicAnimation.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"]; 
    animation.toValue = (id)[UIBezierPath bezierPathWithArcCenter:CGPointMake(25, 25) radius:self.frame.size.height*1.2 startAngle:0 endAngle:DEGREES_TO_RADIANS(360) clockwise:YES].CGPath; 
    animation.removedOnCompletion = NO; 
    animation.duration = 0.45f; 
    animation.fillMode = kCAFillModeForwards; 
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 
    [self.layer.mask addAnimation:animation forKey:nil]; 

На первый взгляд это работает, но проблема в том, что сама анимация более овальной формы, чем круговая: http://i.stack.imgur.com/fqPYJ.png

код вдохновлен Animate circular mask of UIImageView in iOS.

ответ

0

Ваш код выглядит разумным. (Хотя, если вы всегда используете полный круг, вы, вероятно, можете использовать более простой метод bezierPathWithOvalInRect вместо bezierPathWithArcCenter).

Трудно сказать, на что я смотрю, в изображении, которое вы связали. Два слоя белого цвета, поэтому мы не можем сказать, что к чему. Возможно, вы захотите установить один из слоев на цветной фон во время тестирования.

Что касается того, почему вы получите овал: есть ли у вас трансформация на любом из ваших слоев? В частности, масштабное преобразование? Это приведет к искажению.

+0

Здравствуйте! Спасибо за ответ! Я изменил цвет и обновил изображение, теперь это должно быть ясно. Я не использую никаких преобразований ... Только код, указанный выше. – Oskar

+0

Исправлено использование метода bezierPathWithOvalInRect вместо bezierPathWithArcCenter. Благодаря!! – Oskar