ios - 动画 - 在 iOS 中绘制一个圆圈 - 不为完整的圆圈制作动画

Question

我正在使用以下代码绘制圆的一部分。然而，我有点困惑，因为在动画结束时它似乎立即填满了圆圈的其余部分。为什么会这样？

// Set up the shape of the circle
int radius = 62;
CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius)
                                         cornerRadius:radius].CGPath;
// Center the shape in self.view
circle.position = CGPointMake(18, 92);

// Configure the apperence of the circle
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor whiteColor].CGColor;
circle.lineWidth = 5;

// Add to parent layer
[cell.layer addSublayer:circle];

// Configure animation
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = .8; // "animate over 10 seconds or so.."
drawAnimation.repeatCount         = 1.0;  // Animate only once..

// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue   = [NSNumber numberWithFloat:0.4f];

// Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

Answer 1

发生这种情况是因为默认情况下 CAAnimation完成后从图层中移除。这意味着它将删除您设置动画的值并将其设置为默认值 1.0动画结束后。由于您使用的是 CAAnimation该层实际上从未改变其属性，它只是看起来像它，这就是为什么当动画被移除时它被设置为 1.0 的原因。因为那是层的值 strokeEnd是因为你从未改变过它。尝试通过打印 strokeEnd 的值来亲自查看当动画发生时。

这可以通过两种方式解决，设置最终的 storkeEnd开始动画之前的值，以便在删除它时它仍然是 0.4或者通过将某些属性添加到您的 CABasicAnimation .你需要设置的属性来实现你正在寻找的是:

drawAnimation.fillMode = kCAFillModeForwards

和

drawAnimation.removedOnCompletion = false

希望对你有帮助