jQuery.Deferredでわかりやすく順番にアニメーションする方法
以前の記事(コチラ→jQueryで順番にアニメーションする方法を考える)で、コールバック関数とdelay()を使って、順番にアニメーションする方法をご紹介しましたが、
今回はjQuery Defferdを使って、処理する順番をよりわかりやすくしてアニメーションする方法をご紹介いたします。
jQuery Defferdの使い方については、コチラのサイトを参考にさせていただきました→「爆速でわかるjQuery.Deferred超入門」
前回の方法を使った場合、並べるアニメーションの数が少ない場合は問題ありませんが、
並べるアニメーションの数が増えてきた場合は、
コールバック関数の中にコールバック関数があるという入れ子の状態が多重になり、
とてもプログラムとして見にくいものとなります。
また、順番を入れ替える必要が出てきたときにも、書き換える作業が煩雑になってしまいます。
その問題を解決してくれるのが、jQuery1.5から導入された標準モジュールであるjQuery.Deferredです。
jQuery.Deferredは、非同期処理を扱いやすくするために導入されたもので、
これを利用することで、これまでコールバック関数を鬼のように組まなければならなかった処理を、
とても簡潔にまとめることができます。
方法
1.並べるそれぞれの関数にjQuery.Defferdを設定する
i.それぞれの関数内で、任意の名前でDeferredオブジェクトを作ります。
|
1 | var d = new $.Deferred; //dは任意の名前 |
ii.関数内のアニメーションのコールバック関数でresolveを知らせる。
|
1 | d.resolve(); |
iii.関数の最後でpromiseを返す。
|
1 | return d.promise(); |
具体的な例を出すと、
|
1 2 3 4 5 6 | //車が走ってくる function carRun(){ $("#car").animate({ "right" : "378px" }, 1000, "easeOutBounce"); } |
このような関数にjQuery.Defferdを設定する場合、
|
1 2 3 4 5 6 7 8 9 | function carRun(){ var d = new $.Deferred; $("#car").animate({ "right" : "378px" }, 1000, "easeOutBounce", function(){ d.resolve(); }); return d.promise(); } |
のような形に直します。
2.関数を繋げる
以上の準備ができたら、いよいよ関数の実行部分を記述します。
記述方法は、次のように最初実行する関数に、.then(関数名)という形で記述していくだけです。
|
1 2 3 4 5 | carRun() .then(birdFlap) .then(birdEscape) .then(birdBack) .then(birdStop) |
これでそれぞれの関数に設定されたアニメーションが、
順番に実行されるようになります。
↓コチラが実際のDEMOです。
前回つくったDEMOよりも、並べるアニメーションが増えていますが、
実行部分の記述が簡潔なので、並べ方で迷うこともありませんでした。
また、実行部分を簡潔にまとめられるので、実行部分を関数化して利用することも容易になり、
次のようにリプレイの設定をするのも簡単にできました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function playAnimation(){ carRun() .then(birdFlap) .then(birdEscape) .then(birdBack) .then(birdStop) .then(showReplay); } playAnimation(); $("#replay").click(function(){//クリックしたらリプレイ $("#replay").fadeOut(); playAnimation(); }); |
一つ一つの関数は少し記述が増えるので、
並べるアニメーションが少ない場合は前回ご紹介した方法を使ったほうがいい場合もあると思いますが、
並べるアニメーションが多い場合は、とても便利な方法だと思います。
Author Profile
SHARE
