私の目標:
- 下の図のようなパスに沿って画像を移動/アニメーション化します (ベジェ曲線を接続している可能性があります)。
- IE7+ で動作する必要があります。複数のソリューションを構築する必要はありません。
- 動画を一時停止/再開できます。
- 画像はパスに沿って移動し続けます (繰り返し)。
私が検討したこと
- CANVAS: IE7+8 ではサポートされていません。explorercanvas はまだテストしていません! いくつかの z-index の問題を予測します。
- SVG、IE7+8 ではサポートされていません。
- jQuery.path は、jQuery animate 関数を拡張するプラグインです。履歴書の部分がわかりません。サポートされている場合は、CSS 変換を使用したいと考えています。
私の計画
- CSS 3D 変換、CSS 2D 変換、または jQuery.animate (サポートされているもの) と requestAnimationFrame を使用して画像をアニメーション化します。
- すべての座標を計算し、画像をピクセル単位で単純に移動します。
私の質問
- 私の計画は狂気のように聞こえますか? より良い提案?
- いくつかのパフォーマンスの問題が予測されますか? 5K または 10K の座標になる可能性があります。
- すべての座標を計算するスマートな方法、プログラム、関数、または同様のものを知っていますか?