iPhone Core Animation - 画圆 [英] 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 Core Animation - 画圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！