jQueryで順番にアニメーションする方法を考える
jQueryを使ってアニメーションさせる場合、アニメーションを同時ではなく、
何かの動作が終わった後、順番に実行するということも必要になってきます。
特に最近は、サイトのコンテンツもパララックスを使ったものなど、リッチなものが増えており、
そういった機会も増えてきています。
そこで、jQueryを使って順番にアニメーションする方法について、２つほど取り上げてやってみました。
↓デモはこちらから
今回は、
- 車が走ってくる
- 車が木にぶつかって木が揺れる
- 鳥が逃げ出す
という順番で実行するアニメーションを考えます。
まず車が走ってきた後に、木にぶつかって木が揺れるところまで。
jQueryでは、animate()で、コールバック関数を指定することで、
アニメーションが終わった後に、別の動作をさせることができるので、
それを利用しようとしましたが、
そうした場合、 今回のように特殊なイージングをアニメーションを使っていると、
動きが完全に終わってから次の動作をすると、不自然な動きになってしまいました。
↓例
このような場合は、動きをかぶせる必要があるので、
「車が走ってくる動き」と「車が木にぶつかって揺れる動き」を同時に実行させ、
「木にぶつかって揺れる動き」をdelay()を使って少し遅らせることで、
順番に実行させることにしました。
delay()を使えば、完全に前の動きが終わるのを待つ前に実行させることができるので、
特殊なイージングを使った場合に、適切なタイミングを見つけて、
次の動きを実行させることができます。
↓結果
次に木がぶつかった後に、鳥が逃げ出すアニメーションです。
これは先程ご紹介した、コールバック関数を使いました。
木が揺れるアニメーションが終わった後に、コールバック関数を呼び出して、
鳥が逃げ出すアニメーションを実行して実現しました。
鳥の羽ばたきは、GIFアニメーションを利用しました。
それぞれの動きをGIFアニメーションで行い、大きな動きをjQueryなどで行うというサイトを、
最近よく見かけるので、今回やってみました。
↓こちらがコード全部です。
HTML
|
1 2 3 4 5 6 7 8 9 10 | <!-- head --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <!-- body --> <div id="viewArea"> <p id="tree"><img src="images/tree.png" width="310" height="439" alt="tree"></p> <p id="car"><img src="images/car.png" width="181" height="122" alt="car"></p> <p id="bird"><img src="images/bird.png" width="96" height="96" alt="bird"></p> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | #viewArea{ width: 800px; height: 560px; background: #fff; margin: 60px auto 0; position: relative; overflow: hidden; } #tree{ width: 310px; height: 439px; position: absolute; bottom: 0; right: 248px; } #car{ width: 181px; height: 122px; margin-right: -181px; position: absolute; bottom: 0; right: -20; } #bird{ width: 90px; height: 90px; position: absolute; bottom: 249px; right: 415px; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | $(function(){ //車を走らせる関数と、木が揺れる関数を同時に実行 carRun(); treeShake(); //車が走ってくる function carRun(){ $("#car").animate({ "right" : "378px" }, 1000, "easeOutBounce"); } //木が揺れる function treeShake(){ //木が揺れるアニメーションを少し遅らせる $("#tree").delay(400).animate({ "right" : "263px" }, 50, "easeOutElastic",function(){ $("#tree").animate({ "right" : "248px" }, 250, "easeOutElastic"); }); $("#bird").delay(400).animate({ "right" : "430px" }, 50, "easeOutElastic",function(){ $("#bird").animate({ "right" : "415px" }, 250, "easeOutElastic",function(){ //木が揺れるアニメーションの後に鳥が逃げ出す関数を実行 birdChange(); birdEscape(); }); }); } //鳥が羽ばたき出す function birdChange(){ $("#bird img").attr("src" , "images/bird_flap.gif"); } //鳥が逃げる function birdEscape(){ $("#bird").animate({ "bottom" : "400px", "right" : "820px" }, 5000, "linear"); } }); |
jQuery.Deferredをつかうと、もっと効率的に記述ができるようなのですが、
少し難しいので、そちらは、またの機会にやってみたいです。
追記：jQuery.Deferredを使ってみました
→「jQuery.Deferredでわかりやすく順番にアニメーションする方法」
Author Profile
SHARE
