jQueryを使ってFlashのようなアニメーションを目指す練習として、
歩くアニメーション作りに挑戦しました。
作り方
1.背景画像を準備する
今回は遠近感を出すために、遠くの背景から近くの背景に向かうにつれて、
早くアニメーションするようにします。
そのため、近くの背景ほど、長さのある背景にしました。
重ねて表示するので、PNGで書き出しました。
動かない背景
一番遠くの山
近くの山
一番近くの山
道(一番手前の背景)
2.歩く人の画像を準備する
今回は簡単に、２コマで歩いている状態を表現することにしました。
人物の高さを上下させると歩いている様子が伝わりやすいです。
3.HTMLを準備する
“view”というoverflow:hiddenにしたボックスの中に、背景をposition:absoluteで順番に重ね、
最前面の人は、画像を切り替えるので、CSSのbackgroundでファイルを指定しました。
右から左に動くので、右を基準に配置しました。
HTML
|
1 2 3 4 5 6 7 8 | <div id="view"> <div id="back1"><img src="images/back1.png" width="950" height="400" /></div> <div id="back2"><img src="images/back2.png" width="1150" height="400" /></div> <div id="back3"><img src="images/back3.png" width="1324" height="400" /></div> <div id="back4"><img src="images/back4.png" width="1500" height="400" /></div> <div id="back5"><img src="images/back5.png" width="2000" height="400" /></div> <div id="hito"></div> </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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | #view{ margin-top: 20px; width: 950px; height: 400px; overflow: hidden; position: relative; } #back1{ width: 950px; height:400px; position: absolute; top: 0px; right: 0px; } #back2{ width: 1150px; height:400px; position: absolute; top: 0px; right: 0px; } #back3{ width: 1324px; height:400px; position: absolute; top: 0px; right: 0px; } #back4{ width: 1500px; height:400px; position: absolute; top: 0px; right: 0px; } #back5{ width: 2000px; height:400px; position: absolute; top: 0px; right: 0px; } #hito{ width: 200px; height: 400px; position: absolute; top: 0px; left: 375px; background: url(images/hito1.png) no-repeat; } |
4.jQueryで操作する
今回のアニメーションは、主に２つの操作で行いました。
i.背景の画像を動かす
それぞれの背景の画像を、animate()のrightを使って、右から左へ、動かします。
手前の画像ほど、動かす量を多くすることで、速さを変え、遠近感を出しました。
ii.人物画像を定期的に切り替える
setInterval()を使って、人物の画像を0.5秒ごと、
交互に切り替えるようにしました。
背景画像のanimate()は処理が終わると勝手にとまりますが、
setInterval()の場合は永遠に動き続けることになるので、
countHitoという変数で動いた数を数え、
背景画像のアニメーションの終了に合わせて、画像を切り替えるのをやめるようにしました。
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 | $(function(){ $("#view #back2").animate({ right: "-200px" },10000); $("#view #back3").animate({ right: "-374px" },10000); $("#view #back4").animate({ right: "-550px" },10000); $("#view #back5").animate({ right: "-1050px" },10000); var flagHito = 0; var countHito = 0; setInterval(function(){ if(flagHito == 0 && countHito < 19){ $("#hito").css("background-image", "url(images/hito2.png)"); flagHito = 1; countHito++; } else if(flagHito == 1 && countHito < 19){ $("#hito").css("background-image", "url(images/hito1.png)"); flagHito = 0; countHito++; } },500); }); |
こちらが実際に製作したアニメーションです
人のアニメーションのコマ数を増やしたり、
背景の動きを細かく調整することで、
よりリアルなアニメーションにすることができると思います。
