iPhone核心动画 - 绘制一个圆圈 [英] iPhone Core Animation - Drawing a Circle

问题描述

我想创建一个动画。我可以解释这个问题的最佳方法是，如果你能想象画一个圆圈。它从顶部或12点钟开始，顺时针顺时针绘制，直到它在10秒左右的空间内成为一个完整的圆圈。

I wish to create an animation. The best way I can explain this is if you can imagine drawing a circle. It starts at the top or 12 o clock and draws clockwise all the way around until it becomes a complete circle over the space of 10 or so seconds.

我有的衣柜来到这里是使用Core Animation绘制一个围绕中心点旋转的点（使用示例代码这里）。但我对如何绘制圆圈感到茫然？非常欢迎任何建议。

The closet I have come to this is to draw a point rotating around a center point using Core Animation (using the sample code here). But I am at a loss on how to draw the circle? Any suggestions are very welcome.

非常感谢：）

推荐答案

你真正应该做的是动画CAShapeLayer的笔划，其中路径是一个圆圈。这将使用Core Animation加速，并且在-drawRect中绘制圆的一部分时不那么混乱：。

What you really should do is to animate the stroke of a CAShapeLayer where the path is a circle. This will be accelerated using Core Animation and is less messy then to draw part of a circle in -drawRect:.

下面的代码将在中心创建一个圆形图层屏幕的顺时针方向为它的行程设置动画，使其看起来好像正在绘制。你当然可以使用你想要的任何形状。 （您可以阅读本文层，了解有关如何为形状图层的笔触设置动画的更多信息。）

The code below will create a circle shape layer in the center of the screen and animate the stroke of it clockwise so that it looks as if it is being drawn. You can of course use any shape you'd like. (You can read this article on Ole Begemanns blog to learn more about how to animate the stroke of a shape layer.)

注意： stoke属性与图层上的边框属性不同。要更改笔划的宽度，您应使用lineWidth而不是borderWitdh等。

Note: that the stoke properties are not the same as the border properties on the layer. To change the width of the stroke you should use "lineWidth" instead of "borderWitdh" etc.

// 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"];

这篇关于iPhone核心动画 - 绘制一个圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！