行をアニメーション化する最も簡単な方法は何ですか？

Question

私は時間の経過とともにワークスペース内の線をアニメーション化するアプリケーションを作成しています。

CGContextSetStrokeColor(context, black); 
CGContextBeginPath(context); 
CGContextMoveToPoint(context, startPoint.x, startPoint.y); 
CGContextAddLineToPoint(context, finalPoint.x, finalPoint.y); 
CGContextStrokePath(context); 

...そしてちょうどfinalPointを更新し、setNeedsDisplayを呼び出すために0.05秒ごとに実行するようにタイマーを設定する：このための私の現在のアプローチは、drawRectに、このようなコードを使用することです。

私はこのアプローチ（一度に5行の線が動いているとき）がひどくアプリケーションを遅くし、そのような高いリフレッシュ頻度であってもまだぎこちないように見えます。

アニメーション化された行でこの非常に単純な線画を実行するには、より良い方法が必要です。つまり、x1、y1から開始し、一定の長さにわたってx2、y2に伸ばしたいとします。私の選択肢は何ですか？私はこれをより速く実行させる必要があり、このclunkyタイマーを取り除くのが大好きです。

ありがとうございます！

Answer 1

CAShapeLayers、およびCATransactionsとCABasicAnimationの組み合わせを使用します。

shapeLayerに特定のパスを追加して、レンダリングを実行させることができます。

CAShapeLayerオブジェクトには、strokeStartとstrokeEndという2つのプロパティがあり、パスのどこで行末をレンダリングするかを定義します。デフォルトはstrokeStartでは0.0、strokeEndでは1.0です。

strokeEndが最初に0.0から始まるようにパスを設定すると、行が表示されません。

strokeEndプロパティを0.0から1.0にアニメートすると、行が長くなることがあります。

CAShapeLayerの暗黙の0.25秒、デフォルトのアニメーションのタイミングを変更するには、あなたがそうのように、クラスに機能を追加することができますが：

-(void)animateStrokeEnd:(CGFloat)_strokeEnd { 
    [CATransaction begin]; 
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:keyPath]; 
    animation.duration = 2.0f; //or however long you want it to happen 
    animation.fromValue = [NSNumber numberWithFloat:self.strokeEnd]; // from the current strokeEnd value 
    animation.toValue = [NSNumber numberWithFloat:_strokeEnd]; //to the end of the path 
    [CATransaction setCompletionBlock:^{ self.strokeEnd = _strokeEnd }]; 
    [self addAnimation:animation forKey:@"animateStrokeEnd"]; 
    [CATransaction commit]; 
} 

あなたは_strokeEndの値としては0.0fから1.0Fに任意の値を渡すことができます。

setCompletionBlock:は、渡す値がアニメーションの完了後に明示的に設定されることを保証します。