圆弧段的动画以完整行程结束 [英] Animation of stroke of circle segment ends in complete stroke

问题描述

我正在尝试为一个圈子的某个部分的外观设置动画。要归档这个，我使用CABasicAnimations，它的工作安静的罚款。

I'm trying to animate the appearance of a segment of a circle. To archive this I use a CABasicAnimations which works quiet fine.

动画开始在顶部，移动安静很好的整圆的三分之一。但是当动画完成时，圆圈会立即绘制完成。

The animation starts on top and moves quiet nicely to one third of the whole circle. But when the animation finishes, the circle is being drawn completely immediately.

如何防止这种情况？

这是我的自定义UIView的源代码：

Here is the source code of my custom 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"];
}

推荐答案

Core Animation创建图层的副本并动画化副本的属性。原始图层称为模型图层，副本称为表示图层。

When you apply an animation to a layer, Core Animation creates a copy of the layer and animates the properties of the copy. The original layer is called the model layer and the copy is called the presentation layer. An animation never changes the properties of the model layer.

您试图通过将 removedOnCompletion 设置为 NO 。你还必须设置动画的 fillMode 使它工作，但它不是真正的动画属性的正确方法。

You tried to fix this by setting removedOnCompletion to NO. You would also have to set the fillMode of the animation to make this work, but it's not really the correct way to animate a property.

正确的方法是更改​​模型图层上的属性，然后应用动画。

The correct way is to change the property on your model layer, then apply the animation.

// 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 。我强烈建议你看它。

This is explained in the Core Animation Essentials video from WWDC 2011. I highly recommend watching it.

这篇关于圆弧段的动画以完整行程结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！