yanagisawa●promisePromiseはjavaScriptも採用している非同期処理の仕組みです。これまでに学んだcompleteのコールバックやタイムラインで大抵のことは事足りますが、せっかくなのでメモ。シンプルにタイムラインではない、普通のアニメに対して利用してみました。finishedメソッドでpromiseオブジェクトを作成し、thenメソッドで完了した際の処理を設定します。resolve(){document.getElementById("b1").innerHTML="resolve";}timelineオブジェクトに対してもfinishedメソッドやthenメソッドを利用できます。タイムラインの最後のアニメでcompleteを設定するのと同じですが、明示的にタイムラインのすべてが終わったときの処理として分かりやすと思います。resolve(){document.getElementById("b1").innerHTML="resolve";}failの設定はできないpromiseオブジェクトの便利なところは、処理が中断/失敗したときの設定もできる点なのですが、anime.jsに搭載されたpromiseにはfailの設定はできないようです。そもそもアニメの処理に中断/失敗という概念?が無いので当然なのですが、アニメライブラリならあっても良いと思うのです。jQueryを学んだときにも同じことを試していました(リンク先の「メモ」の項目)。fail()anime.jsのpromiseにはfailの処理は設定できないhttp://jquerystudy.info/anime/1_advance/26_prom_fail.html/まずはpauseボタンが押されたときの処理を確認。pauseするだけでなく、ヘルパーメソッドのremoveを利用してanimeオブジェクト自体も削除しています。(){animeObj.pause();anime.remove('.box');}failの処理はjavaScriptの構文に合わせてthenメソッドの第2引数に設定しました。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メソッドを利用すると、設定したすべてのアニメが終了したときの処理を設定できます。done');}これは演出が完了するまで操作を受け付けないようにしたい時などに利用できそうです。演出をキャンセルできるようにしたいところですが、ここれでもfailの設定はできないようです(未練がましい...)。次回はパスアニメーションを学ぶ予定です。コメントをキャンセルメールアドレスが公開されることはありません。