9

スケッチ

次のシナリオでは、円弧 (別名ドーナツ セグメント) をアニメートする必要があります。このシナリオでは、円弧が仮想円の中心に対して一定の半径 r を維持します (円弧は円のすぐ外側にあります)。

1) 半径 r と角度 alpha を維持しながら、アーク ストローク幅を x から y にアニメーション化します。

2) 一定のストローク幅と半径を維持しながら、アルファからベータへの円弧角度をアニメーション化します。

3) 1 と 2 を一緒に行いますが、場合によっては独立したアニメーション/タイミングを使用します。

これが私がこれまでに持っているものです:

CGContextAddArc を使用してアークを描画するだけのカスタム ビューとしてアーク描画を実装しました。これは、静的アークには問題ありませんが、何もアニメーション化しません。

また、[UIBezierPath addClip] などでクリップされた画像を描画する方法も知っています。

後者が興味深いのは、シナリオ 1 の場合、2 つの方法で目的の効果を達成できると思うからです。弧を描き続け、ストロークと半径の両方を変更して、知覚される内側の円の半径を同じに維持します (これについては楽観的ではありませんが、半径が「ジグル」するのではないかと心配しています)、またはサイズが大きくなる円のセグメントを描画し (おそらくアフィン変換でスケールを変更するだけで)、静的な円形マスクによってクリップされます。

では、これらすべての概念を実際の描画コードに結び付けるにはどうすればよいでしょうか。実際のコードは必要ありませんが (それでも問題ありません)、概念的なアプローチのようなものです。カスタム描画を使用して UIView でこれをすべて行うことができますか、それとも私が理解しているカスタム キー アニメーションについて話す必要がありますか? CALayers などが含まれます。言い換えれば、スムーズなアニメーションのための合成の観点から効率的でありながら、コーディングが最も簡単なこれらすべてを実行するための適切なアーキテクチャは何ですか?

4

2 に答える 2

7

円弧のパスを作成し、さまざまなストローク プロパティをアニメーション化することで、CAShapeLayer でこれを行うことができます。完全な円のパスを作成し、strokeStart プロパティと strokeEnd プロパティを使用して、円の特定の部分だけをストロークすることができます。シェイプ レイヤーは中央でストロークされているため、線幅を大きくすると内側と外側に均等に増加することに注意してください。これに対抗するには、同じ円形状でマスクして線幅を 2 ​​倍にするか、パスをアニメーション化して線幅の半分だけ半径を大きくして、最も内側の点が常に中心までの距離が同じになるようにします。 .

最初の例は lineWidth プロパティをアニメーション化することで実行でき、2 番目の例は strokeStart および strokeEnd プロパティをアニメーション化することで実行できます

于 2012-06-07T06:43:49.287 に答える
6

これは、CALayer サブクラスのアニメーション化可能なカスタム プロパティを使用して実装する必要があります。このチュートリアル(ソースはこちら) は、アニメーション化された円グラフを作成するためのもので、見栄えがよくなります。要件に合わせて変更できるはずです。

于 2012-06-07T06:26:06.940 に答える