円の点で折れ線グラフをアニメーション化する

Question

私は面白い問題を見つけましたが、それを解決する方法がわかりません。私はデータ点が円形の点でマークされている折れ線グラフを持っています。現時点では、私自身、ラインごとにCAShapeLayerを作成しており、各ドットについてはCAShapeLayerを作成しています。

行がstrokeEndアニメーションキーのパスでアニメートされています。それは働いています。しかし、ややネガティブな効果は、グラフを開くと、すでに描画されているすべてのデータ点が表示され、その線がアニメーション化されていることです。

理想的には、始めに何も表示されず、線がアニメーションデータポイントを取得すると、線がそれらを通過すると描画されるように、この動作を変更したいと考えています。

私は今この問題について考えていましたが、私はそれを解決するエレガントな方法を見つけることができません。私が望むものを達成するためのかなり簡単な方法があるはずです。たぶん私は複合パスを作成する必要があります（ただし、ドットを塗りつぶす必要があるのに対して、ラインをストロークする必要があると指定するにはどうすればよいですか）。

私は正しい方向に案内してくれますか？

Answer 1

これを処理する方法はたくさんあります。

グラフのXインクリメントが一定であり、リニアタイミングを使用していると仮定すると、合計アニメーション時間をデータポイントの数で単純に除算し、ポイントを追加する必要がある時間を計算することができますその線がそのX位置に進むときのグラフ。適切な時間間隔で、親ビューのレイヤーにドットシェイプレイヤーを追加するだけです。

グラフパスに新しい線分を1つずつ追加したり、タイマーで新しい線分を追加したり、同時に点の形を追加したりすることもできます。これは、滑らかな線画ではなく、段階的なアニメーションを提供します。