Blog

jQueryで歩くアニメーションに挑戦

jQueryを使ってFlashのようなアニメーションを目指す練習として、

歩くアニメーション作りに挑戦しました。

 

 

作り方

 

1.背景画像を準備する

今回は遠近感を出すために、遠くの背景から近くの背景に向かうにつれて、

早くアニメーションするようにします。

そのため、近くの背景ほど、長さのある背景にしました。

重ねて表示するので、PNGで書き出しました。

 

動かない背景

 

一番遠くの山

 

近くの山

 

一番近くの山

 

道(一番手前の背景)

 

2.歩く人の画像を準備する

今回は簡単に、2コマで歩いている状態を表現することにしました。

人物の高さを上下させると歩いている様子が伝わりやすいです。

3.HTMLを準備する

“view”というoverflow:hiddenにしたボックスの中に、背景をposition:absoluteで順番に重ね、

最前面の人は、画像を切り替えるので、CSSのbackgroundでファイルを指定しました。

右から左に動くので、右を基準に配置しました。

 

HTML

 

CSS

 

4.jQueryで操作する

今回のアニメーションは、主に2つの操作で行いました。

i.背景の画像を動かす

それぞれの背景の画像を、animate()のrightを使って、右から左へ、動かします。

手前の画像ほど、動かす量を多くすることで、速さを変え、遠近感を出しました。

 

ii.人物画像を定期的に切り替える

setInterval()を使って、人物の画像を0.5秒ごと、

交互に切り替えるようにしました。

 

背景画像のanimate()は処理が終わると勝手にとまりますが、

setInterval()の場合は永遠に動き続けることになるので、

countHitoという変数で動いた数を数え、

背景画像のアニメーションの終了に合わせて、画像を切り替えるのをやめるようにしました。

 

javascript

 

こちらが実際に製作したアニメーションです

DEMO

 

人のアニメーションのコマ数を増やしたり、

背景の動きを細かく調整することで、

よりリアルなアニメーションにすることができると思います。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ