iPhone 核心动画 - 画一个圆

Question

我想制作一个动画。我能解释这一点的最好方法是如果你能想象画一个圆圈。它从顶部或 12 点钟位置开始，一路顺时针绘制，直到在 10 秒左右的时间里变成一个完整的圆圈。

我来到这里的壁橱是使用核心动画绘制一个围绕中心点旋转的点(使用示例代码 here )。但我不知道如何画圆？非常欢迎任何建议。

非常感谢:)

Answer 1

您真正应该做的是对路径为圆形的 CAShapeLayer 笔划进行动画处理。这将使用核心动画来加速，并且比在 -drawRect: 中绘制圆的一部分更简洁。

下面的代码将在屏幕中心创建一个圆形图层，并按顺时针方向为其笔划设置动画，使其看起来就像正在绘制一样。您当然可以使用任何您想要的形状。 (您可以阅读 Ole Begemanns 博客上的 this article，了解有关如何为形状图层的笔画设置动画的更多信息。)

注意:描边属性与图层上的边框属性不同。要更改笔画的宽度，您应该使用“lineWidth”而不是“borderWitdh”等。

// Set up the shape of the circle
int radius = 100;
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(CGRectGetMidX(self.view.frame)-radius, 
                              CGRectGetMidY(self.view.frame)-radius);

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

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

// Configure animation
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = 10.0; // "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:1.0f];

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

// Add the animation to the circle
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];