今回は、jQueryのanimate()でアニメーションを起こしていく方法を学んでいきます。
animate()を使用することで、Webサイト内に多様なアニメーションを起こすことができます。
目次
animate()でアニメーションを起こす
まずは、animate()とは何かについて学んでいきましょう。
animate()とは、HTMLの要素に対して、スタイルを変化させることでアニメーションを起こすメソッドです。
animate()のアニメーションの例
まずは、アニメーションの実例をみてイメージを膨らませていきましょう。
アニメーションを起こすために、HTMLの要素を作成しました。
<div class="sample-animation">大きくなれよ。</div>次に、animate()でアニメーションの設定を行います。
$(".sample-animation").animate(
{
fontSize: 64,
},
1000
);ここまで記述できたら、ブラウザで動きを確認してみましょう。
画像のようにアニメーションができていれば大丈夫です。
このように、HTMLの要素に対してスタイルを変化させることにより、アニメーションを起こすことができます。
animate()の使い方
animate()のイメージが掴めたところで、使い方について学んでいきましょう。
animate()には、４つの引数を設定することができます。
- CSSプロパティ
- 時間
- イージング
- 関数
雛形を記述すると以下のようになります。
$(セレクタ).animate(
{
CSSプロパティ,
},
時間,
イージング,
関数,
);それぞれの引数の後には、項目を区切るための「,（カンマ）」を付けることを忘れないようにしましょう。
また、animate()では、CSSプロパティ以外の引数は省略することができることも覚えておきましょう。
animate()でCSSプロパティを指定する
animate()で、CSSプロパティを記述する際は、１点注意が必要です。
アニメーションを作成できるCSSプロパティは、値に数値を記述するものに限られます。
なので、「colorプロパティ」や「backgroundプロパティ」などの
値をテキストで指定するCSSプロパティは animate()でアニメーションを作成することができません
animate()でCSSプロパティを指定する
先ほどの例では、CSSプロパティにfonsSizeのプロパティを指定していました。
//先ほどの例
$(".sample-animation").animate(
{
fontSize: 64,
},
1000
);animate()で時間を指定する
animate()で指定する時間は、「ミリ/秒」で指定します。
「ミリ/秒」の計算は、「０を３つ取る」と覚えておきましょう。
「1000」と記述されていた場合は、０を３つ取って「１秒」となります。
先ほどの例では、1秒のアニメーションの時間を指定していました。
//先ほどの例
$(".sample-animation").animate(
{
fontSize: 64,
},
1000
);animate()でイージングを指定する
animate()で、アニメーションの動きのイージングを指定することができます。
イージングとは、簡単に言うとアニメーションの速度のことです。
animate()で指定できるイージングには種類がありますが、
今回は「linear」と「swing」という２つの値を指定する例をお見せしたいと思います。
- linear：一定の速度でアニメーションが進行する
- swing：始めは遅く、途中は速く、最後は遅くアニメーションが進行する
上記の２つの特徴を押さえた上で、以下の例を見ていきましょう。
・animate()のイージングの例 まずは、HTMLでアニメーションを起こす要素を作成します。
<div class="sample-box sample-animation_A">linear</div>
<div class="sample-box sample-animation_B">swing</div>次に、見やすいようにスタイルを整えます。
div {
font-size: 40px;
margin-top: 80px;
}
.sample-box {
background: #ffbb1c;
width: 10px;
}最後に、animate()で、divタグそれぞれに対して、３秒間かけて横幅が広がるアニメーションを起こします。
$(".sample-animation_A").animate({ width: 1000 }, 3000, "linear");
$(".sample-animation_B").animate({ width: 1000 }, 3000, "swing");ここまで記述ができたら、ブラウザで確認してみましょう。
画像のように、animate()のイージングを指定することで、アニメーションの速さを調節することができます。
animate()で関数を指定する
次に、animate()で関数を指定する方法を確認しましょう。
animate()でアニメーション完了後に関数を呼び出す例
それでは、先ほどのHTMLの例を利用して確認してみましょう。
わかりやすいように、アニメーションを起こす要素を１つに減らします。
<div class="sample-box sample-animation_A">linear</div>次に、関数の指定とanimate()で関数の呼び出しを行います。
const animationDone = () => {
alert("アニメーションが終わりました！");
};
$(".sample-animation_A").animate(
{ width: 1000 },
3000,
"linear",
animationDone
);ここまで記述できたら、ブラウザで確認してみましょう。
アニメーションが完了したら、alert()が起動していれば大丈夫です。
上記の例のように、animate()で関数を呼び出すことが可能なのです。
アニメーションを作ってみよう
ここまででanimate()の使い方を説明してきました。
animate()を使うことで、CSSプロパティの値を少し変えるだけでもアニメーションができてしまいます。
jQueryを使ってアニメーションを制作する第１歩として、animete()を使いこなせるようになりましょう。
