iPhone核心animation – 绘制一个圈子

我想创build一个animation。 我可以解释这个最好的方法是如果你能想象画一个圆圈。 它从顶部或12点开始，一直沿着顺时针方向绘制，直到在10秒左右的空间内变成一个完整的圆圈。

我来到这里的壁橱是使用核心animation（在这里使用示例代码）绘制一个围绕中心点旋转的点。 但是我怎么画圈子呢？ 任何build议都非常受欢迎。

非常感谢 ：）

Answer 1

你真正应该做的是animationCAShapeLayer的行程，其中path是一个圆圈。 这将加速使用核心animation，而不是混乱，然后绘制在-drawRect：的一部分的圆。

下面的代码将在屏幕中心创build一个圆形图层，并顺时针绘制它的行程，使其看起来好像正在绘制。 你当然可以使用任何你想要的形状。 （您可以在Ole Begemanns博客上阅读这篇文章 ，以了解更多关于如何animation形状图层的描边的信息。）

注意： stoke属性与图层上的边框属性不同。 要改变笔画的宽度，你应该使用“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"]; 

Answer 2

这是另一个解决这个问题的方法，基于David的回答。 这种方法可以让你设置圆圈animation的方向，并提供更多的控制。 编辑：我写了一篇关于如何用Swift绘制圆圈的博客文章，我将尽力跟上beta版本。 检查下面的代码是否不适合你。

 let radius = 100.0 // Create the circle layer var circle = CAShapeLayer() // Set the center of the circle to be the center of the view let center = CGPointMake(CGRectGetMidX(self.frame) - radius, CGRectGetMidY(self.frame) - radius) let fractionOfCircle = 3.0 / 4.0 let twoPi = 2.0 * Double(M_PI) // The starting angle is given by the fraction of the circle that the point is at, divided by 2 * Pi and less // We subtract M_PI_2 to rotate the circle 90 degrees to make it more intuitive (ie like a clock face with zero at the top, 1/4 at RHS, 1/2 at bottom, etc.) let startAngle = Double(fractionOfCircle) / Double(twoPi) - Double(M_PI_2) let endAngle = 0.0 - Double(M_PI_2) let clockwise: Bool = true // `clockwise` tells the circle whether to animate in a clockwise or anti clockwise direction circle.path = UIBezierPath(arcCenter: center, radius: radius, startAngle: CGFloat(startAngle), endAngle: CGFloat(endAngle), clockwise: clockwise).CGPath // Configure the circle circle.fillColor = UIColor.blackColor().CGColor circle.strokeColor = UIColor.redColor().CGColor circle.lineWidth = 5 // When it gets to the end of its animation, leave it at 0% stroke filled circle.strokeEnd = 0.0 // Add the circle to the parent layer self.layer.addSublayer(circle) // Configure the animation var drawAnimation = CABasicAnimation(keyPath: "strokeEnd") drawAnimation.repeatCount = 1.0 // Animate from the full stroke being drawn to none of the stroke being drawn drawAnimation.fromValue = NSNumber(double: fractionOfCircle) drawAnimation.toValue = NSNumber(float: 0.0) drawAnimation.duration = 30.0 drawAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear) // Add the animation to the circle circle.addAnimation(drawAnimation, forKey: "drawCircleAnimation") 

Answer 3

我得到了这个问题的解决scheme，下面的代码。 我似乎已经把我手头上的问题的解释搞乱了，所以把它改写成另一个问题，用正确的解决scheme得到了答案，请看这里

感谢大家的意见！

 -(void)drawRect:(CGRect)rect { // Drawing code CGRect allRect = self.bounds; CGContextRef context = UIGraphicsGetCurrentContext(); // Draw background CGContextSetRGBStrokeColor(context, self.strokeValueRed, self.strokeValueGreen, self.strokeValueBlue, self.strokeValueAlpha); // white CGContextSetLineWidth(context, 5); // Draw progress CGPoint center = CGPointMake(allRect.size.width / 2, allRect.size.height / 2); CGFloat radius = (allRect.size.width - 4) / 2; CGFloat startAngle = - ((float)M_PI / 2); // 90 degrees CGFloat endAngle = (self.progress * 2 * (float)M_PI) + startAngle; CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0); CGContextStrokePath(context); } 

Answer 4

好的，我有一个部分修复。 我发现下面的代码绘制了一个圆的段。 它基本上是一个UIView子类，每次更新进度时都会触发它的drawRect。 我现在唯一的问题是如何改变它，以便绘制部分或切片，而不是画圆圈描边？

 -(void)drawRect:(CGRect)rect { // Drawing code CGRect allRect = self.bounds; CGRect circleRect = CGRectInset(allRect, 2.0f, 2.0f); CGContextRef context = UIGraphicsGetCurrentContext(); // Draw background CGContextSetRGBStrokeColor(context, self.strokeValueRed, self.strokeValueGreen, self.strokeValueBlue, self.strokeValueAlpha); // white CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 0.1f); // translucent white CGContextSetLineWidth(context, self.lineWidth); CGContextFillEllipseInRect(context, circleRect); CGContextStrokeEllipseInRect(context, circleRect); // Draw progress CGPoint center = CGPointMake(allRect.size.width / 2, allRect.size.height / 2); CGFloat radius = (allRect.size.width - 4) / 2; CGFloat startAngle = - ((float)M_PI / 2); // 90 degrees CGFloat endAngle = (self.progress * 2 * (float)M_PI) + startAngle; CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f); // white CGContextMoveToPoint(context, center.x, center.y); CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0); CGContextClosePath(context); CGContextFillPath(context); }