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