Question

我希望绘制一条曲线直到它完全旋转并连接成一个完整的圆圈，只是圆形轮廓，没有填充。这必须在几秒钟内制作动画。

有人能指出我正确的方向吗？我已经向similar question询问了这个问题，但我措辞错误，所以每个人都很难理解我的意思，因此在问题的海洋中迷失了。

非常感谢您的帮助

[edit]

我目前正在对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]解决方案

对，我觉得自己是个正确的笨蛋！问题是，笔画颜色值没有初始化，这意味着该行正在绘制，但显然无法看到它！

Answer 1

这与我对您的其他问题here给出的答案相同。

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

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

注意： 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

取出所有填写的内容。

将CGContextFillPath最后更改为CGContextStrokePath。

在结尾附近取出CGContextMoveToPoint和CGContextClosePath。那些只勾勒出楔形的直边。

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

Answer 3

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

iPhone：绘制一条曲线，直到它成为圆形动画

3 个答案: