Svgアニメーションオブジェクトフォローパス

Question

私は、SVGパスに従うオブジェクト（サークル）を作成しようとしています（私はこれを成功させました）が、このオブジェクトがいくつかの座標に達したときに最小化し、再び自動的にそれを何度も繰り返します。これどうやってするの？

Answer 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/