iPhone：绘制一条曲线，直到它变成一个圆圈动画

Question

我希望绘制一条曲线，直到它完成一个完整的旋转并连接成为一个完整的圆形，而不是圆形轮廓。这必须在几秒钟内动画。

任何人都可以指向正确的方向吗？我已经问过一个similar question这个问题，但是我错误地写了这个问题，所以每个人都很难理解我的意思，于是就迷失在问题的海洋中。

任何帮助

[编辑]

非常感谢我目前子类的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); 
} 

[编辑＃2]

我改变了代码删除所有的填充引用，但现在它不是画什么:(任何想法？

- (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); 
} 

[编辑＃3]解决方案

对我感觉就像一个正确的dickhead！问题是，笔画颜色值没有初始化，意味着线正在绘制，但显然看不到它!!

Answer 1

取出填充的所有内容。

将CGContextFillPath最后更改为CGContextStrokePath。

取出接近结尾处的CGContextMoveToPoint和CGContextClosePath。这些只是勾勒了楔形的直线边。

您可能必须更改CGContextMoveToPoint以移动到弧的起点而不是中心，而不是将其移出。

Answer 2

一个非常简单的方法可以是UIView的子类，并绘制一个可变长度的弧。然后您可以使用定时器定期更新旋转角度

Answer 3

这与我给你的其他问题here的答案相同。

你真的应该做的是动画化CAShapeLayer的行程其中路径是一个圆。这将使用核心动画加速并且不太麻烦，然后在-drawRect中绘制一部分圆。

下面的代码将在屏幕的中心创建一个圆形图层，并顺时针对它的动画进行动画处理，使其看起来好像正在绘制。你当然可以使用任何你想要的形状。 （你可以阅读奥莱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"];