Анимация обводки отрезка круга заканчивается полным обводкой - PullRequest
Новая
       13

Анимация обводки отрезка круга заканчивается полным обводкой

7 голосов
/ 04 февраля 2012

Я пытаюсь оживить появление сегмента круга. Для архивации я использую CABasicAnimations, которая работает нормально тихо.

Анимация начинается сверху и плавно перемещается на треть всего круга. Но когда анимация заканчивается, круг рисуется полностью сразу.

Как я могу предотвратить это?

Вот исходный код моего пользовательского UIView: 

- (void)drawRect:(CGRect)rect
{
    int radius = 100;
    int strokeWidth = 10;
    CGColorRef color = [UIColor redColor].CGColor;
    int timeInSeconds = 5;

    CGFloat startAngle = 0;
    CGFloat endAngle = 0.33;

    CAShapeLayer *circle = [CAShapeLayer layer];

    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;

    circle.position = CGPointMake(CGRectGetMidX(self.frame)-radius, CGRectGetMidY(self.frame)-radius);

    circle.fillColor = [UIColor clearColor].CGColor;
    circle.strokeColor = color;
    circle.lineWidth = strokeWidth;

    [self.layer addSublayer:circle];

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = timeInSeconds;
    drawAnimation.repeatCount         = 1.0;
    drawAnimation.removedOnCompletion = NO;

    drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle];
    drawAnimation.toValue   = [NSNumber numberWithFloat:endAngle];

    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
}

1 Ответ

18 голосов
/ 04 февраля 2012

Когда вы применяете анимацию к слою, Core Animation создает копию слоя и анимирует свойства копии.Исходный слой называется слой модели , а копия называется уровень представления .Анимация никогда не изменяет свойства слоя модели.

Вы пытались это исправить, установив removedOnCompletion в NO.Вы также должны были бы установить fillMode анимации, чтобы сделать эту работу, но это не совсем правильный способ анимировать свойство.

Правильный способ состоит в том, чтобы изменить свойство на уровне модели, а затемприменить анимацию. 

// Change the model layer's property first.
circle.strokeEnd = endAngle;

// Then apply the animation.
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = timeInSeconds;
drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle];
drawAnimation.toValue   = [NSNumber numberWithFloat:endAngle];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

Это объясняется в Базовые основы анимации видео из WWDC 2011 .Я настоятельно рекомендую посмотреть его.

...