UIImageをクリップするUIBezierPathをアニメ化する

Question

ドーナツのように見え、アニメーション化してドーナツサークルが完成していない（ストロークが閉じていない）ように見える画像があります。説明するのは難しいですが、100になるスピードメーターを想像して50を駆動します。UIGmageを描画するUIGraphicsBeginImageContextWithOptionsの中で、パスと[path addClip]の助けを借りてマスキングを行いました。

私の質問は、私がパスをアニメーション化する方法ですか？私はCABasicAnimationと2つのパス（startAngleとendAngleが同じで、2番目のパスはendAngleが目的の角度である最初のパス）を "path"とkeyPathで試しましたが、それは動作しません。

ものは何でもできます;）

Answer 1

私が使用してCABasicAnimationを使用してUIBezierPathをアニメーション...

UIBezierPath *bezierPath = [self bezierPath]; 

CAShapeLayer *bezierLayer = [[CAShapeLayer alloc] init]; 

bezierLayer.path = bezierPath.CGPath; 
bezierLayer.strokeColor = [UIColor redColor].CGColor; 
bezierLayer.fillColor = [UIColor clearColor].CGColor; 
bezierLayer.lineWidth = 5.0; 
bezierLayer.strokeStart = 0.0; 
bezierLayer.strokeEnd = 1.0; 
[self.view.layer addSublayer:bezierLayer]; 

if (animate) 
{ 
    CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    animateStrokeEnd.duration = 1.0; 
    animateStrokeEnd.fromValue = @0.0f; 
    animateStrokeEnd.toValue = @1.0f; 
    [bezierLayer addAnimation:animateStrokeEnd forKey:@"strokeEndAnimation"]; 
} 

Answer 2

私はCAShapeLayerを設定し、シェイプレイヤーは、あなたのドーナツ状をレンダリングさせることを示唆しています。太い線を持つ円弧のCGPathとしてドーナツの形を描画できるはずです。

CAShapeLayerには、strokeStartプロパティとstrokeEndプロパティがあります。どちらも0.0〜1.0の範囲です。デフォルトでは、strokeStartは0.0（最初から開始）で、strokeEndは1.0（パス全体を描画）です。これらのプロパティはアニメーション可能です。

strokeEndを.75から1.0に変更すると、パスの3/4だけが描画され、パスの最後の1/4が描画されます。

gitHubのプロジェクトでは、画像上のシェイプレイヤーをマスクとして使用して、「クロックワイプ」トランジションを作成する方法を示しています。そのためには、弧上の線幅を大きくして、ドーナツ形状を描くのではなく、枠の矩形を完全に塗りつぶすようにします。あなたの場合は、線の太さを小さくしてドーナツを描きます。

Core Animation demo on Github

仕事でシェイプレイヤーのアニメーションを見るためにアプリで「マスクアニメーション」ボタンをクリックしてください。