yanagisawa●パスに沿ったアニメパスに合わせて要素を移動できるライブラリはかなり珍しいと思う。pathメソッドでパスを作成し、それをanimeオブジェクト内で利用する感じです。true,});上記のサンプルではパスと要素が重なっているが、実際はパスの位置に関係なく要素の位置から相対的にパスに沿ってアニメします(つまり位置合わせ大変)。上記のサンプルはcssのposition:absoluteで位置を合わせていますが、その処理を省くと以下のようになります。位置合わせを省いた例http://jquerystudy.info/anime/2_etc/00b_test.html/パスアニメを時間をずらして再生してみました。パスはデータ自体を参照しているため表示しなくても問題ありません。電車のようなパスアニメhttp://jquerystudy.info/anime/2_etc/01_train.html/objectタグで組み込んだsvgもcontentDocumentを利用すれば操作可能です。svg.getElementById('mPath');●SVGのモーフィングsvgのpolygonデータはモーフィングもできるそうなので試して見ました。マニュアルにはありませんでしたがfillもアニメできました。0,50',fill:'#aaccff',direction:'alternate',delay:500,loop:true});少し応用すればメニューなどに使えそうです。P5っぽいメニューhttp://jquerystudy.info/anime/2_etc/04_menu.html/●SVGのストロークアニメvivus.jsのようなストロークアニメも作成できます。sobjectタグで表示されたsvgには対応していません。contentDocumentでパス情報を取得することは可能ですが、操作はできないのです。vivis.jsと異なり、svgのプロパティもアニメできるのでcssに頼らずサンプルのようなアニメを作成することができます。あとストロークアニメではrestartメソッドは機能しないようです。ストロークアニメhttp://jquerystudy.info/anime/2_etc/05_stroke.html/javaScriptは変数名にハイフンを利用できないので、fill-opacityのようなcssプロパティはfillOpacityのようなキャメルケースに置きかえられる仕組みになっています。strokeOpacity:0,easing:'easeInOutSine',duration:500,delay:1000});}今回はここまで。次回はkute.jsのような3D的なアニメを作成できるか確認したいと思います。コメントをキャンセルメールアドレスが公開されることはありません。