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

●promise

PromiseはjavaScriptも採用している非同期処理の仕組みです。これまでに学んだcompleteのコールバックやタイムラインで大抵のことは事足りますが、せっかくなのでメモ。
 
まずはシンプルにタイムラインではない、普通のアニメに対して利用してみました。finishedメソッドでpromiseオブジェクトを作成し、thenメソッドで完了した際の処理を設定します。

animeオブジェクトにpromiseを
http://jquerystudy.info/anime/1_advance/24_promise.html/
var animeObj=anime({targets:'.box',left:270,easing:'linear',duration:3000,autoplay:false});
var myPromise = animeObj.finished;
myPromise.then(resolve);
function resolve(){
	document.getElementById("b1").innerHTML="resolve";	
}

timelineオブジェクトに対してもfinishedメソッドやthenメソッドを利用できます。
タイムラインの最後のアニメでcompleteを設定するのと同じですが、明示的にタイムラインのすべてが終わったときの処理として分かりやすと思います。

timelineオブジェクトにpromiseを
http://jquerystudy.info/anime/1_advance/25_timeline.html/
var myTimeline = anime.timeline({targets: '.box',autoplay:false});
myTimeline.add({left:270}).add({top:270}).add({left:  0});	
var myPromise = myTimeline.finished;
myPromise.then(resolve);
function resolve(){
	document.getElementById("b1").innerHTML="resolve";	
}

 
 

failの設定はできない

promiseオブジェクトの便利なところは、処理が中断/失敗したときの設定もできる点なのですが、anime.jsに搭載されたpromiseにはfailの設定はできないようです。
そもそもアニメの処理に中断/失敗という概念?が無いので当然なのですが、アニメライブラリならあっても良いと思うのです。
jQueryを学んだときにも同じことを試していました(リンク先の「メモ」の項目)。
→参考:jQuery – fail()

anime.jsのpromiseにはfailの処理は設定できない
http://jquerystudy.info/anime/1_advance/26_prom_fail.html/

 
まずはpauseボタンが押されたときの処理を確認。pauseするだけでなく、ヘルパーメソッドのremoveを利用してanimeオブジェクト自体も削除しています。
→参考:Helper – remove

document.getElementById("btn_pause").onclick = function (){
	animeObj.pause();
	anime.remove('.box');
}

failの処理はjavaScriptの構文に合わせてthenメソッドの第2引数に設定しました。
→参考:Promise.prototype.then()

myPromise.then(resolve,fail);
function resolve(){
	document.getElementById("b1").innerHTML="resolve";	
}
function fail(){
	document.getElementById("b1").innerHTML="error";		
}

failの処理が設定できれば、アニメがキャンセルされたときの処理を追加できて便利だと思うのに残念です。
念のためtimelineオブジェクトのアニメに対しても試しましたが、やはりダメでした。

timelineオブジェクトのpromiseにもfailはダメ
http://jquerystudy.info/anime/1_advance/26b_timelin_fail.html/

 

allメソッド

javaScriptに備わっているPromise.allはanime.jsのpromiseオブジェクトにも利用できるのでサンプルを作成しました。
allメソッドを利用すると、設定したすべてのアニメが終了したときの処理を設定できます。

すべてのアニメが完了したら実行
http://jquerystudy.info/anime/1_advance/27_promise_all.html/
var prom_1 = anime_1.finished;
var prom_2 = anime_2.finished;
var prom_3 = anime_3.finished;
Promise.all([prom_1,prom_2,prom_3]).then(doneFunc);
function doneFunc(){
	alert('all anime is done');
}

これは演出が完了するまで操作を受け付けないようにしたい時などに利用できそうです。演出をキャンセルできるようにしたいところですが、ここれでもfailの設定はできないようです(未練がましい…)。
 
今日はここまで。
次回はパスアニメーションを学ぶ予定です。
 
 
 

コメントを残す

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


九 − = 6


*

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