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]ソリューション

右のジックヘッドのように感じました！ストロークの色の値が初期化されず、線が描画されていたが、明らかにそれを見ることができないという問題がありました。

Answer 1

「塗りつぶし」と表示されているものをすべて取り出してください。

最後のCGContextFillPathをCGContextStrokePathに変更します。

最後に近いところにCGContextMoveToPointとCGContextClosePathを取り出します。それらはちょうどくさびの真っ直ぐな側面を概説します。

CGContextMoveToPointを変更せずに、中心ではなく弧の開始点に移動する必要があります。

Answer 2

非常に単純なアプローチは、UIViewをサブクラス化し、可変長の円弧を描画させることができます。タイマーを使用して回転角度を定期的に更新することができます

Answer 3

これは他の質問hereと同じ回答です。

は、軌跡が円であるCAShapeLayerのストロークをアニメートすることです。これはCore Animationを使用して加速され、-drawRect：でサークルの一部を描画するのが面倒です。

以下のコードは、画面の中央に円の形のレイヤーを作成し、そのストロークを時計回りにアニメーションして、描かれているかのように見せます。もちろん、好きな形を使用することもできます。 （あなたは、シェイプレイヤーのストロークをアニメーション化する方法についての詳細を学ぶためにオレBegemannsのブログにthis articleを読むことができます。）

注：ストロークのプロパティは、レイヤー上の境界線のプロパティと同じではありませんこと。ストロークの幅を変更するには、 "borderWitdh"などの代わりに "lineWidth"を使用する必要があります。

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