●パスに沿ったアニメ

パスに合わせて要素を移動できるライブラリはかなり珍しいと思う。
pathメソッドでパスを作成し、それをanimeオブジェクト内で利用する感じです。

var mPath = anime.path('#motionPath path');
var motionPath = anime({
	targets: '#b1',
	translateX: mPath('x'),
	translateY: mPath('y'),
	rotate: path('angle'),
	easing: 'linear',
	duration: 20000,
	loop: true,
});

上記のサンプルではパスと要素が重なっているが、実際はパスの位置に関係なく要素の位置から相対的にパスに沿ってアニメします（つまり位置合わせ大変）。上記のサンプルはcssのposition:absoluteで位置を合わせていますが、その処理を省くと以下のようになります。

　
パスアニメを時間をずらして再生してみました。パスはデータ自体を参照しているため表示しなくても問題ありません。

　
objectタグで組み込んだsvgもcontentDocumentを利用すれば操作可能です。

var svg = document.getElementById('pathSvg').contentDocument;
var mPath = svg.getElementById('mPath');

●SVGのモーフィング

svgのpolygonデータはモーフィングもできるそうなので試して見ました。マニュアルにはありませんでしたがfillもアニメできました。

var animeObj = anime({
	targets: '.shape polygon',
	points: '0,0 70,0 138,0 138,50 86,50 0,50',
	fill:'#aaccff',
	direction:'alternate',
	delay:500,
	loop:true
});

少し応用すればメニューなどに使えそうです。

●SVGのストロークアニメ

vivus.jsのようなストロークアニメも作成できます。ただしsobjectタグで表示されたsvgには対応していません。contentDocumentでパス情報を取得することは可能ですが、操作はできないのです。
　
vivis.jsと異なり、svgのプロパティもアニメできるのでcssに頼らずサンプルのようなアニメを作成することができます。あとストロークアニメではrestartメソッドは機能しないようです。

　
javaScriptは変数名にハイフンを利用できないので、fill-opacityのようなcssプロパティはfillOpacityのようなキャメルケースに置きかえられる仕組みになっています。

function fillFunc(){
	anime({targets:'.guideline',opacity:0,easing:'easeInOutSine',duration:500,delay:1000});
	anime({targets:'#font_line path',fillOpacity:1,easing:'easeInOutSine',duration:500,delay:1000});
	anime({targets:'#font_line path', strokeOpacity:0,easing:'easeInOutSine',duration:500,delay:1000});
}

　
今回はここまで。
次回はkute.jsのような3D的なアニメを作成できるか確認したいと思います。