Blog

jQueryで順番にアニメーションする方法を考える

2013.08.06Cat:jQuery デザイナー

jQueryを使ってアニメーションさせる場合、アニメーションを同時ではなく、

何かの動作が終わった後、順番に実行するということも必要になってきます。

特に最近は、サイトのコンテンツもパララックスを使ったものなど、リッチなものが増えており、

そういった機会も増えてきています。

 

そこで、jQueryを使って順番にアニメーションする方法について、2つほど取り上げてやってみました。

 

↓デモはこちらから

DEMO

 

今回は、

  1. 車が走ってくる
  2. 車が木にぶつかって木が揺れる
  3. 鳥が逃げ出す

という順番で実行するアニメーションを考えます。

 

まず車が走ってきた後に、木にぶつかって木が揺れるところまで。

 

jQueryでは、animate()で、コールバック関数を指定することで、

アニメーションが終わった後に、別の動作をさせることができるので、

それを利用しようとしましたが、

そうした場合、 今回のように特殊なイージングをアニメーションを使っていると、

動きが完全に終わってから次の動作をすると、不自然な動きになってしまいました。

 

↓例

DEMO

 

このような場合は、動きをかぶせる必要があるので、

「車が走ってくる動き」と「車が木にぶつかって揺れる動き」を同時に実行させ、

「木にぶつかって揺れる動き」をdelay()を使って少し遅らせることで、

順番に実行させることにしました。

delay()を使えば、完全に前の動きが終わるのを待つ前に実行させることができるので、

特殊なイージングを使った場合に、適切なタイミングを見つけて、

次の動きを実行させることができます。

 

↓結果

DEMO

 

次に木がぶつかった後に、鳥が逃げ出すアニメーションです。

これは先程ご紹介した、コールバック関数を使いました。

木が揺れるアニメーションが終わった後に、コールバック関数を呼び出して、

鳥が逃げ出すアニメーションを実行して実現しました。

 

鳥の羽ばたきは、GIFアニメーションを利用しました。

それぞれの動きをGIFアニメーションで行い、大きな動きをjQueryなどで行うというサイトを、

最近よく見かけるので、今回やってみました。

 

↓こちらがコード全部です。

HTML

 

 

CSS

 

JavaScript

 

jQuery.Deferredをつかうと、もっと効率的に記述ができるようなのですが、

少し難しいので、そちらは、またの機会にやってみたいです。

 

追記:jQuery.Deferredを使ってみました

→「jQuery.Deferredでわかりやすく順番にアニメーションする方法

 

 

 

 

 

Author Profile

ninomiya
ninomiya

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

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

Archive

ページTOPへ