私は、SVGパスに従うオブジェクト(サークル)を作成しようとしています(私はこれを成功させました)が、このオブジェクトがいくつかの座標に達したときに最小化し、再び自動的にそれを何度も繰り返します。これどうやってするの?Svgアニメーションオブジェクトフォローパス
0
A
答えて
1
ライブラリを使用している場合は、GreensockとmorphSVGプラグインを使用してください。それらは、パスに沿って要素をアニメートすることを容易にします。 pathDataToBezierメソッドを使用して既存のパスからパスデータをフィードし、そのパスに沿ってオブジェクトをアニメートできます。現在の方向に基づいて自動回転する機能もあります。
基本的なトゥイーンライブラリであるTweenMaxまたはTweenLiteが必要で、次にジョブを実行するためにmorphSVGプラグインが必要になります。 DrawSVGとAttr pluginのような他のものもほしいでしょう。
これはまた、onUpdate、onStart、onCompleteなどのトリガイベントのあらゆる方法を備えているため、いつでも必要に応じてトゥイーンするのは非常に簡単です。
http://codepen.io/anon/pen/VerMWX
http://greensock.com/forums/topic/13581-animate-svg-object-along-motion-path/
関連する問題
- 1. SVGからPHP4へのSVG
- 2. サーバー側のSVGへのSVG?
- 3. SVG?
- 4. SVG
- 5. SVG -
- 6. SVG
- 7. SVGクリップパスは、同じ<svg>タグ
- 8. SVGからSVGへ - どのように?
- 9. SVGファイルでSVGパスのコマンドと座標
- 10. SVGにSVGファイルを含める
- 11. 親SVG内のSVG画像のセンタリング
- 12. SVGイメージとSVG埋め込み
- 13. SVGネストされた<svg>グループVSG
- 14. svgマスクテキストダイナミック
- 15. ウェブリンクsvg
- 16. SVGアニメーショングラデーションカラー
- 17. SVGドロップシャドーレイヤー
- 18. SVG href
- 19. SVGアニメーショングラデーションストップ
- 20. SVG円
- 21. SVGドロップシャドウスプレッド
- 22. svgサークルパスアニメーション
- 23. SVGパターン
- 24. SVGウォーターフィルアニメーション
- 25. SVGフィルターアーティファクト
- 26. SVG(V10)
- 27. はSVG
- 28. Svgバルーンスレッドアニメーション
- 29. はSVG
- 30. SVGテキストヒットテスト
あなたのコードはどこにありますか?これまでに試したことを示す[mcve]を入力してください。 – Shaggy