anime.js(6):シーケンシャルなアニメ2

●タイムライン

addメソッドでアニメを追加できるtimelineは便利に見える。キーフレームの方が複雑なアニメにも対応できると思うけど、可読性が低くなりがちなので用途に合わせて使い分けていきたい。
 
まずはシンプルなサンプル。timelineメソッドで作成したタイムラインにaddメソッドでアニメを追加すると、順々に再生してくれます。

タイムラインにアニメを追加する
http://jquerystudy.info/anime/1_advance/18_timeline.html/
var myTimeline = anime.timeline({targets: '.box',autoplay:false});
myTimeline.add({left:270}).add({top:270}).add({left:  0});

初めは上記のようなleft/topではなくtranslateX/translateYを利用しました。そのさいに躓いたのでメモ。以下のサンプルは一見正しい処理に見えますが正常に機能しません。

【悪い例】translateだと機能しないの?
http://jquerystudy.info/anime/1_advance/18b_timeline.html/
var myTimeline = anime.timeline({
	targets: '.box',
	autoplay: false
});
myTimeline
	.add({translateX:270})
	.add({translateY:270})
	.add({translateX:  0});

これはanime.jsの問題ではなくcssの問題です(たぶん)。translateX=x/translateY=yは簡略構文で本来はtranslate(x,y)です。なので上記の構文では設定されてない値に0が補足され、次のように解釈されてしまうと思うのです。→translate(270,0)→translate(0,270)→translate(0,0)
 
ということで以下のように記述したら機能するようになりました。translateを利用するときはXとYの両方を設定するようにしましょう。

【良い例】translateでも機能するよ
http://jquerystudy.info/anime/1_advance/18c_timeline.html/
myTimeline
	.add({translateX:270,translateY:  0})
	.add({translateX:270,translateY:270})
	.add({translateX:  0,translateY:270});

もしキーフレームを利用すると以下のようなソースになります(delayの扱いが面倒ですし、プロパティが別々なのでアニメがイメージしにくいです)。
 
タイムラインの方が可読性が高いですがaddで区切られるのでアニメが入り交じるような複雑なアニメは実現できないので上手く使い分ける必要がありそうです。

var animeObj = anime({
		targets: '.box',
		translateX:[{value:270,duration:1000},{value:0,duration:1000,delay:1000}],
		translateY:[{value:270,duration:1000, delay:1000}],
		autoplay: false
	});

タイムラインならキーフレームで実現できなかった、アニメ毎のコールバックを設定できます。サンプルではアニメが完了する毎にcompFuncが処理されて、表示している数値が増えていきます。

アニメ毎にコールバックを受け取る
http://jquerystudy.info/anime/1_advance/19_callback.html/
myTimeline
	.add({left:270, complete:compFunc})
	.add({top: 270, complete:compFunc})
	.add({left:  0, complete:compFunc});

タイムラインは複数の要素のアニメも順次再生できます。

アニメ毎にコールバックを受け取る
http://jquerystudy.info/anime/1_advance/20_multi.html/
myTimeline
	.add({targets:'#b1',left:270,complete:compFunc})
	.add({targets:'#b2',left:270,complete:compFunc})
	.add({targets:'#b3',left:270,complete:compFunc})
	.add({targets:'#b4',left:270,complete:compFunc})
	.add({targets:'#b5',left:270,complete:compFunc})

 

offset

タイムラインにおいてaddされたアニメの開始を調整できる。delayと異なりマイナスの値が設定できたり、addの順番を無視した絶対指定が可能になっています。
 
以下のサンプルでは値に「-=300」と設定しているため、前のアニメが終わる0.3秒前にアニメが開始されます。※「-=」のような算術代入演算子が必要なことを忘れないでください。
→参考:Relative offset

myTimeline
	.add({left:270,easing:'linear'})
	.add({top: 270,easing:'linear',offset:'-=300'})
	.add({left:  0,easing:'linear',offset:'-=300'});

translateだとx、yの両方を設定するから思うような設定ができないかも(新しい設定に上書きされてしまう)。以下のサンプルは上記のサンプルとは異なった動きになります。

myTimeline
	.add({translateX:270,translateY:  0,easing:'linear'})
	.add({translateX:270,translateY:270,easing:'linear',offset:'-=300'})
	.add({translateX:  0,translateY:270,easing:'linear',offset:'-=300'});

算術代入演算子を利用せずに直接数値を設定すると、その時間にアニメが開始されます。
→参考:Absolute offset

offsetで再生タイミングを設定
http://jquerystudy.info/anime/1_advance/22_offset_abs.html/
myTimeline
		.add({left:270,easing:'linear',offset:1000})
		.add({top: 270,easing:'linear',offset:0})
		.add({left:  0,easing:'linear',offset:2000});

1つの要素の例だと分かりにくいので複数要素の例も確認しました。

offsetで再生タイミングを設定(2)
http://jquerystudy.info/anime/1_advance/23_offset_abs2.html/
myTimeline
	.add({targets:'#b1',left:270,offset:1000})
	.add({targets:'#b2',left:270,offset:0})
	.add({targets:'#b3',left:270,offset:2000})
	.add({targets:'#b4',left:270,offset:4000})
	.add({targets:'#b5',left:270,offset:3000})

次回はPromiseについて学ぶ予定です。