【jQuery入門】animate()の使い方とアニメーション事例まとめ！

こんにちは、ライターのマサトです！

今回は、jQueryから簡単に多彩なアニメーション効果をHTML要素に付与できる「animate()」について学習していきましょう！

この記事では、

などの基本的な内容から、応用的な使い方に関しても解説していきます。

この記事で、「animate()」をしっかり学習して自分のスキルアップを目指しましょう！

「animate()」とは？

それでは、まず最初に「animate()」について基本的な知識から学んでいきましょう！

「animate()」は、特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれます。

例えば、単純なh1要素を用意します。

<h1>サンプルタイトル</h1>

このh1要素に対して「font-size」を80pxに指定すると、初期値から徐々に文字サイズが大きくなるアニメーションになります。もちろん、アニメーションのスピードや動きの調整も可能で、関数を使った任意の処理を実行することもできます。

ただし、「color」など数値では設定できないCSSプロパティに関しては指定できないので注意しましょう。

「animate()」の使い方

この章では、「animate()」の基本的な使い方について見ていきましょう！

一般的な構文や実際のプログラミング手法、およびオプション設定などについて学んでいきます。

基本的な構文と書き方について

まずは、基本となる構文から見ていきましょう！

「animate()」は、対象となるHTML要素にいくつかのオプションを設定して実行するのが基本となります。

対象要素.animate( CSSプロパティ, duration, easing, 関数 )

一番重要なのが第1引数に指定する「CSSプロパティ」で、それ以外は省略することが可能です。また、CSSプロパティはオブジェクト形式で記述する必要があります。

例えば、「font-size」であれば「{fontSize: 40}」のようにキャメルケースに置き換えて設定します。その他の引数に関しても、本記事で詳しく解説していきますので参考にしてみてください！

CSSを設定したアニメーション方法について

「animate()」を使った実際のプログラミング手法について見ていきましょう！

まずは、以下のように単純なHTMLを用意します。

<h1>サンプルタイトル</h1>

このh1要素に対して、文字サイズをズームアップするようなアニメーションを付与するには次のように記述します。

$('h1').animate({fontSize: 80});

animate()の引数に注目してください！

オブジェクト形式でCSSプロパティの「font-size」を設定していますよね。このように記述することで、初期値の文字サイズから80pxのサイズまでズームアップするアニメーションになります。

また、数値は文字列で指定することも可能です。

$('h1').animate({fontSize: '80px'});

文字列で指定することで、「px」だけでなく「%」なども表現可能なので応用範囲は広いでしょう。

「duration」「easing」の設定方法

次に、オプション設定として「duration」「easing」についても見ていきましょう！

どちらも省略可能なオプションではありますが、有効活用することでアニメーションの動きを調整することが可能です。

「duration」は、ミリ秒で指定するようになっており、アニメーションが完了するまでの時間を設定できます。

「easing」は、アニメーションの挙動を指定可能で、「linear」と「swing」の2種類を文字列で設定します。

次のサンプル例を見てください！

$('h1').animate({fontSize: 80}, 2000, 'swing');

この例では、先ほどの「font-size」を利用したサンプルにdurationとeasingを追加したものです。

durationが「2000」に設定しているので、つまり2秒間かけてアニメーションが実行されるという意味になります。

また、easingには「swing」が設定されており、デフォルトよりも動きに変化があるのが分かります。

「animate()」に関数を設定する

「animate()」の引数にはコールバック関数を設定することができるので合わせてご紹介しておきます！

基本的な使い方としては、animate()の第4引数にそのまま関数を指定する方法です。

$('h1').animate({fontSize: 80}, 2000, 'linear', function() {

    console.log('アニメーションが実行されました！');

});

この例では、アニメーションが実行されたあとすぐに関数内に記述された処理が実行されます。

また、第2, 第3引数を省略した状態でも関数を設定することは可能です。

$('h1').animate({fontSize: 80}, function() {

  console.log('アニメーションが実行されました！');

});

この場合は、第2引数に関数を設定することになりますが、このようなケースでも正常に動作するように設計されています。

ちなみに、関数は無名関数だけでなく通常の関数名を指定することもできます。

$('h1').animate({fontSize: 80}, 2000, 'linear', sampleEvent);

  
function sampleEvent() {

  console.log('イベントが実行されました！');

}

この例では、「sampeEvent()」という関数を外部に作成しており、その関数名を活用してanimate()に適用しているわけです。

「animate()」の活用

この章では、「animate()」を活用したアニメーションサンプル例を見ていきましょう！

主に、CSSプロパティでよく使われる「opacity」「transform」や、画面スクロールに使える「scrollTop」の使い方を学んでいきいます。

「opacity」を使ったアニメーションサンプル

まずは、CSSプロパティの「opacity」を使ったアニメーションサンプルを作ってみましょう！

「opacity」は、数値（0 ~ 1）を指定することでHTML要素の透明度を変化させることができます。

animate()と組み合わせることで、HTML要素を少しずつ透明（非表示）にしていくアニメーションを簡単に実現できます。

次のサンプル例を見てください！

$('h1').animate({opacity: 0}, 2000);

この例では、h1要素に対してanimate()を実行しており、引数に「opacity」を指定して透明度を変化させています。

opacityは「0」が完全な透明で「1」が非透明なので、値を「0」にしておけば少しずつ透明になって消えるわけです。

また、あらかじめ用意されている固有の文字列を次のように指定することも可能です！

$('h1').animate({opacity: 'toggle'}, 2000);

この例では、opacityの値を「toggle」としており、このようにすることで透明・非透明を自動で繰り返してくれるのです。

「scrollTop」を使ったアニメーションサンプル

「scrollTop」を利用するとブラウザの画面移動をアニメーションさせることが可能になります。

そのため、例えばWebページの最下段までスクロールした時に最上部へ戻るボタンを作成するのに最適でしょう。

次のサンプル例を見てください！

$('button').click(function() {

    $('html').animate({scrollTop: 0});

})

この例では、ボタンのクリックイベント処理内でanimate()を実行しているのが分かります。引数には「scrollTop: 0」と記述されていますが、これは画面の最上部の位置に移動するという意味になります。これにより、ボタンがクリックされるとアニメーションしながら画面が最上部まで戻るアニメーションになるのです。

ちなみに、「scrollTop」の基本から応用技について次の記事でまとめているので、ぜひ参考にしてみてください！

まとめ

今回は、jQueryでHTML要素にアニメーション効果を付与できる「animate()」について学習をしました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！