anime.js(4):前回の続き+コールバック

●基礎的な利用3

値に相対値を利用できるが、クリックするたびに移動するような処理はできないようです…。
→参考:Property values

anime({targets:'.box',left:'+=100',easing:'linear',autoplay:false});

これは初期値の2倍にしたいとか、そういうときに便利なのだと思う。

anime({targets:'.box',scale:'*=2',autoplay:false});

kute.jsでは変形の基準点を設定できた。anime.jsでは設定できないが、そもそも基準点はcssで設定できるので上記サンプルで試しています。以下のようにtransform-originを50%に指定することで要素の真ん中が変形の基準点になります。
→参考:can i use ? (transform-origin)

#b1{
	position:absolute;
	top:100px;
	left:100px;
	background-color:#FFCCCC;
	transform-origin:50%,50%;
}

もしクリックするたびに移動したいならjavaScriptで値を変えていくしかないと思う。

ボタンを押すたびに移動する
http://jquerystudy.info/anime/0_core/27_move.html/
var elmX = 0;
document.getElementById("btn_move").onclick = function (){
	elmX +=100;
	anime({targets:'.box',left:elmX});
}

ボタンを連打すると謎挙動する場合があったので移動中は処理を受け付けないようにした。

ボタンを押すたびに移動する
http://jquerystudy.info/anime/0_core/28_move2.html/

 
アニメライブラリでは要素がアニメ中か否かを取得する手段は必要。tweenMaxではisTween()やisActive()がある。
→参考:tweenMax – .isActive()
→参考:tweenMax – TweenMax.isTweening()
 
anime.jsでもあるはずと探したが中々見つからず時間を浪費した。実際はcallbackのcompleteの項目にひっそりと紹介されていた。tweenMaxのメソッド達とは異なりプロパティになっています。
→参考:Check if the animation has finished with myAnimation.completed.

document.getElementById("btn_move").onclick = function (){
	if (myAnime.completed == false) return;
	elmX +=100;
	myAnime = anime({targets:'.box',left:elmX});
}

 
 

●コールバック

アニメが完了したときの処理はcompleteプロパティにfunctionを設定する。functionにはanimeオブジェクトが渡される。

アニメが完了したらcompleteと表示
http://jquerystudy.info/anime/1_advance/00_complete.html/
var animeObj = anime({targets:'.box',left:270,complete:compFunc,easing:'linear',autoplay:false});
function compFunc(anim){
	document.getElementById("b1").innerHTML="complete";
}

引数にはanimeオブジェクトではなくアニメしている要素の方が嬉しい。なのでanimeオブジェクトを調べて要素を取得できるか試した。

animeオブジェクトから要素を抽出
http://jquerystudy.info/anime/1_advance/01_complete.html/
function compFunc(anim){
	var test = anim.animatables[0].target;
	test.innerHTML="complete";
}

前回説明した「functionを利用した値設定」では引数に要素(target)があったので、ここでも要素を期待したのですがありませんでした。
→参考:The function accepts 3 arguments: target, index, targetsLength.
 
とはいえ、これは2つ先のサンプルが指す使用のためなのでしょう。completeは各オブジェクトごとの設定ではなくanimeオブジェクトごとの設定なのです。ということでfunction内のthisもanimeオブジェクトです。

複数の時は少し面倒だけど、animeオブジェクトから要素を抽出することは可能でした。

animeオブジェクトから要素を抽出(複数)
http://jquerystudy.info/anime/1_advance/02_complete.html/
function compFunc(anim){	
	var elmNum = anim.animatables.length;
	for (var i=0; ianim.animatables[i].target;
		test.innerHTML="complete";	
	}
}

注意点としては個別のアニメ毎にcompleteが発生するわけではなく、あくまでも作成したanimeオブジェクトのすべてのアニメが完了したときにcompleteは発生します。

animeオブジェクトから要素を抽出(複数+遅延)
http://jquerystudy.info/anime/1_advance/02b_complete.html/

 
あとanimeオブジェクトを調べていたらマニュアルには存在しないresetメソッドを発見。試して見た。問題なく利用できそう。seekを0にする場合と異なり、アニメ再生中にはリセットできないようです。ちなみに前回紹介したseek(0)もアニメ再生中には効きません。

完了したアニメを元に戻すresetメソッド
http://jquerystudy.info/anime/1_advance/03_reset.html/
document.getElementById("btn_reset").onclick = function (){
	animeObj.reset();
}

beginを利用すると、delayによる待ち時間が終わりアニメを再生するときの処理が設定できます。

アニメ開始時の処理を設定
http://jquerystudy.info/anime/1_advance/04_begin.html/
var animeObj = anime({targets:'.box',left:270,begin:beginFunc,delay:3000,autoplay:false});
function beginFunc(anim){
	document.getElementById("b1").innerHTML="begin";
}

Updateを利用するとanimationFrame毎に実行する処理を設定できます。注意点としてはdelayでの待機中も処理されるという点です。

毎フレームの処理を設定(待機中も含む)
http://jquerystudy.info/anime/1_advance/05_update.html/
anime({targets:'.box',left:270,update:updateFunc,easing:'linear',delay:3000,autoplay:false});

もし待機中には処理したくない場合はrunプロパティで処理を設定します。

毎フレームの処理を設定(待機中は除く)
http://jquerystudy.info/anime/1_advance/06_run.html/
anime({targets:'.box',left:270,run:runFunc,easing:'linear',delay:3000,autoplay:false});

 

ループ時のcompleteの扱い

繰り返しの設定も含め1つのアニメと見なされる。そのため無限ループでは永遠にcompleteは処理されない

ループが終わってから処理される
http://jquerystudy.info/anime/1_advance/07_loop_comp.html/

 

ループが終わってから処理される(往復)
http://jquerystudy.info/anime/1_advance/08_loop_comp2.html/

 
キーフレーム毎にcompleteを設定することはできない

キーフレーム毎に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
});

動作毎にfunctionを実行したい場合はタイムラインとかを利用するのだと思う。
次回は、それを含めシーケンシャルなアニメについて学ぶ。
 
 
 
 

コメントを残す

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


9 × = 九


*

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