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

●復習

 
厳密にはシーケンシャルではないけれど、パラメータ毎にdelayを設定してシーケンシャルっぽいアニメを作成できます。

delayを使った疑似シーケンシャルアニメ
http://jquerystudy.info/anime/1_advance/11_param.html/
var animeObj = anime({
	targets: '.box',
	translateX:{value:250},
	rotate:{value:360,delay:400},
	scale:{value: 2,delay:800},
	autoplay:false,
});

以前の記事でも紹介しましたが、値の設定にfunctionが利用できます。今回は値の利用にhelperのrandomメソッドを利用してみました。

→参考:anime.random()

delayの値にランダムを利用
http://jquerystudy.info/anime/1_advance/12_random.html/
var animeObj = anime({targets:'.box',left:'270px',easing:'linear',autoplay:false,
		delay:function(elm,index,ln){return anime.random(300,3000);}
	});

以前の記事でも紹介しましたが、間違いやすいので再掲。
数値を配列で設定すると初期値と最終値の設定となります。animeオブジェクトを作成した瞬間に最初の要素の値に設定されます(サンプルではleft=100)。
→参考:From > To values

配列は初期値の設定に利用する
http://jquerystudy.info/anime/1_advance/13_fromTo.html/
anime({targets:'.box',left:[100,270],easing:'linear',autoplay:false});

その場合の配列の要素数は2つで固定です。3つ以上設定すると誤動作します。

anime({targets:'.box',left:[100,270,150],easing:'linear',autoplay:false});

 
 

●キーフレームアニメ

本題のシーケンシャルアニメ。アニメを連結する場合は配列内に{}を利用して設定します。anime.jsではこのようなアニメをkeyframeアニメと呼んでいます。これも厳密にはシーケンシャルとはいえないかもしれません。コールバックも個別に設定することはできませんし…。
→参考:keyframe

基礎的なキーフレームアニメ
http://jquerystudy.info/anime/1_advance/14_seq.html/
var animeObj = anime({targets:'.box',easing:'linear',autoplay:false,
		left:[{value:270},{value:50},{value:200}]
	});

{}内にはvalueだけでなく、durationなどの設定も可能です。

詳細設定されたキーフレームアニメ
http://jquerystudy.info/anime/1_advance/15_seq2.html/
var animeObj = anime({targets:'.box',autoplay:false,
		left:[{value:270,duration:1000},
			{value:50,duration:500,delay:1000},
			{value:200,duration:1500,delay:500,easing:'linear'}
		]
	});

注意点として、delayは前のアニメが終わってからの待ち時間であるという点です。

キーフレームアニメでのdelayの扱い
http://jquerystudy.info/anime/1_advance/16_seq3.html/

 
以下のソースでleftの2番目のdelay(青字の部分)は、leftの1番目のアニメが終わってから500ms待ちます。topに設定されたアニメはleftとは別なので考慮されません。

var animeObj = anime({
	targets: '.box',
	left:[{value:270,easing:'linear',duration:500},
		{value:0,duration:500,easing:'linear', delay:500}],
	top:[{value:270,easing:'linear',duration:500, delay:500}],
	autoplay: false
});

プロパティ毎にキーフレームを設定することができます。ただ少し可読性が低くなりがち。

プロパティ毎にキーフレームアニメ
http://jquerystudy.info/anime/1_advance/17_seq4.html/
var animeObj = anime({targets:'.box',autoplay:false,
		translateX:[
			{ value: 270, duration:1000, delay:500},
			{ value:   0, duration:1000, delay:500}
		],
		translateY: [
			{ value:-100, duration:500},
			{ value: 100, duration:500, delay:1000},
			{ value:   0, duration:500, delay:1000}
		]
	});

ただし前回説明したように{}内にコールバックを設定することはできません。

キーフレーム毎にcompleteを設定してもダメ
http://jquerystudy.info/anime/1_advance/09_keyframe_comp3.html/
var animeObj = anime({targets:'.box',
	left:[{value:270,duration:1000,complete:compFunc},
	{value:0,duration:1000,complete:compFunc}],
	easing:'linear',loop:2,autoplay:false
});

キーフレームの外にはcompleteを設定できます。

キーフレームアニメが終わったらcompleteは処理される
http://jquerystudy.info/anime/1_advance/10_keyframe_comp4.html/
var animeObj = anime({targets:'.box',
	left:[{value:270,duration:1000},
	{value:0,duration:1000}],
	complete:compFunc,
	easing:'linear',loop:2,autoplay:false
});

 
今回はここまで。次回はタイムラインについて学ぶ予定です。
キーフレーム毎にコールバックが設定できない点を補えるような使用になっていることを期待したいです。
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


九 × = 72


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>