7

ドーナツのような画像があり、アニメーション化して、ドーナツの円が完成していないように見せたい (ストロークが閉じていない)。説明するのは難しいですが、速度計が 100 になり、50 を運転する様子を想像してみてください。UIImage もレンダリングする UIGraphicsBeginImageContextWithOptions 内のパスと [path addClip] を使用してマスキングを行いました。

私の質問は、パスをアニメーション化できるか、またはどのようにアニメーション化できるかです。keyPath として「path」を使用して、CABasicAnimation と 2 つのパス (startAngle と endAngle が同じで、2 番目のパスが endAngle である最初のパス) で試しましたが、機能しません。

何でも役立ちます;）

4

2 に答える 2

3

CAShapeLayer を設定し、シェイプ レイヤーにドーナツ シェイプをレンダリングさせることをお勧めします。ドーナツ形状を、太い線の円弧の CGPath としてレンダリングできるはずです。

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

strokeEnd を .75 から 1.0 に変更すると、パスは 3/4 だけが描画された状態で開始され、パスの最後の 1/4 を描画してアニメーション化されます。

「クロックワイプ」トランジションを作成するために、シェイプレイヤーを画像のマスクとして使用することを示すgitHubのプロジェクトがあります。そのために、ドーナツ形を描くのではなく、円弧の線幅を非常に大きくして、形がフレームの四角形を完全に埋めるようにします。あなたの場合、ドーナツを描くように線の太さを薄くします。

Github の Core Animation デモ

アプリの [マスク アニメーション] ボタンをクリックして、シェイプ レイヤーのアニメーションが動作していることを確認します。

于 2012-11-23T18:13:24.153 に答える
3

UIBezierPathを使用してアニメーション化しCABasicAnimationます...

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"];
}
于 2012-11-23T16:32:06.003 に答える