圆弧段端点的描边动画以完整的描边结束

Question

圆弧段端点的描边动画以完整的描边结束

objective-cioscocoa-touchcore-animationcabasicanimation

7

我正在尝试动画显示一个圆的一部分。为了实现这个目标，我使用了一个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"];
}

- Shingoo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rob mayoff · Accepted Answer

当您将动画应用于图层时，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的核心动画基础视频中有所解释，我强烈建议观看。