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，因为这就是图层＆＃39 ; strokeEnd的值是因为你从未改变它。尝试通过在动画发生时打印strokeEnd的值来自己查看。

这可以通过两种方式解决，在开始动画之前设置最终的storkeEnd值，这样当它被删除时仍然是0.4或者通过向{{1}添加某些属性}。您需要设置的属性才能实现您的目标：

CABasicAnimation

和

drawAnimation.fillMode = kCAFillModeForwards

希望有所帮助

Answer 2

要设置动画的整个笔画drawAnimation.fromValue应为0.0，drawAnimation.toValue应为1.0。这些值确定动画的中风百分比。

drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

fromValue : Defines the value the receiver uses to start interpolation.
toValue : Defines the value the receiver uses to end interpolation.

0.4使用的是drawAnimation.toValue。所以它在动画的40%处结束，并且在没有动画的情况下一次性绘制其余部分。

例如，如果您设置drawAnimation.fromValue = 0.5和drawAnimation.toValue = 1.0，动画将从半圈开始。如果您设置drawAnimation.fromValue = 0.0和drawAnimation.toValue = 0.5，动画将以半圈结束，其余部分不会动画。

如果您只想绘制圆的40％，则可以使用其他功能创建圆路径。

CGFloat startAngle = (-M_PI/2);
CGFloat endAngle = startAngle + 0.4*(2*M_PI);

circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius, radius)
                                                      radius:radius
                                                  startAngle:startAngle
                                                    endAngle:endAngle
                                                   clockwise:YES].CGPath;

以上代码实际上会从startAngle = -M_PI/2生成40％的圆圈路径。您可以根据需要改变角度。

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

2 个答案: