こんにちは、ライターのマサトです！
今回は、jQueryで実現できるアニメーションの動きを変化させることができる「easing」について学習をしましょう！
プラグインを導入することで、さらにアニメーションをパワーアップさせることも可能です。
そこで、この記事では…
・「easing」とは？
・「easing」の使い方
という基本的な内容から、
・「Easing Plugin」について
・「Easing Plugin」の使い方
などの応用的な使い方に関しても解説していきます。
この記事で、「easing」をしっかり学習して自分のスキルアップを目指しましょう！
「easing」とは？
それでは、まず最初に「easing」について基本的な知識から学習を進めていきましょう！
「easing」を使うと、アニメーションの動きに変化をつけることが可能になります。
この「変化」というのは、常に一定の速度でアニメーションするドロップダウンリストがあるとします。
「easing」を使うと、例えば最初はゆっくり動いて後半にかけて動きが速くなるようなアニメーションにできるわけです。
他にも、遅い動きと速い動きを繰り返したり、バネのようにビヨーンと伸び縮みするものを作ることも可能です。
「easing」の使い方
この章では、「easing」について基本的な使い方を見ていきましょう！
easingの種類や「animate()」を使ったプログラミング手法について学んでいきます！
jQueryで利用できるeasingについて
まずは、「easing」の種類から見ていきましょう！
といっても、実はjQueryの標準で搭載されているeasingは2種類しかありません。
・「linear」：常に一定の速度で動く
・「swing」：最初と最後だけゆっくりで途中は速めに動く
「linear」「swing」は、最初から利用できるので最も基本でありよく使われるアニメーションと言えるでしょう。
これらの「easing」は、jQuery.easingというオブジェクトに動きが記述された関数が格納されています。
つまり、このjQuery.easingオブジェクトに新しい関数を記述することで「動き」を拡張することも可能なわけです。
これを簡単に実現するプラグインも公開されているので、本記事後半で詳細に解説していきいます！
「animate()」でeasingを使う方法
次に、「animate()」を使って実際にeasingをプログラミングしてみましょう！
まずはアニメーションさせたい要素を決めます。
今回は、以下のh1要素を対象にしてみましょう。
<h1>タイトル</h1>
このh1要素をeasingの「swing」を使ってアニメーションさせるには次のように記述します。
$('h1').animate({'marginLeft': '200px'}, 2000, 'swing');
animate()を使ってCSSの「margin-left」を指定することで、h1要素の左側に200pxのスペースが作られます。
これを2秒間かけてアニメーションしながらスペースが作られるのですが、「swing」が指定されていますよね？
そのため、アニメーションは一定の速度ではなく「動き」のあるものに変化するわけです。
ちなみに、animate()の使い方がまだよく分からない方は、以下の記事でまとめているのでぜひ参考にしてみてください！
「Easing Plugin」について
この章では、「easing」を拡張できるプラグインについて見ていきましょう！
主に、プラグインのダウンロード方法やCDNを活用する手法について学んでいきいます。
「Easing Plugin」のダウンロード方法
まずは、プラグインのダウンロード方法について見ていきましょう。
easingのプラグインは「jQuery Easing Plugin ver 1.3」というのが無料で公開されています。
入手先のリンクは以下のとおりです。
【 jQuery Easing Pluginのダウンロードリンク 】
「jquery.easing.1.3.js」というファイルをダウンロードしたら、scriptタグで読み込むようにしておきましょう！
<script src="jquery.easing.1.3.js"></script>
基本的な導入準備はこれだけなので簡単ですね。
標準では2種類しかなかったeasingが、プラグインを導入すると一気に30種類以上に増えるので活用範囲は広いです。
CDNを経由して「Easing Plugin」を使う方法
プラグインの導入は、CDNを使った方法もあるので合わせてご紹介しておきます。
CDNは、あらかじめ必要なファイルをクラウド上に設置して、URLを記述するだけですぐに利用することができます。
そのため、プラグインのJavaScriptファイルをダウンロードする必要がないのでさらに簡単になるわけです。
利用できるURLとしては、次のとおりです！
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js
どちらも同じ機能を持ったプラグインを導入できます。
大きな違いとしては、URLの最初にある「http」「https」が異なっている点でしょう。
最近はSSL対応のWebサイトが増えているので、そうしたサイトでは「https」から始まるURLを使わないとエラーになります。
「Easing Plugin」の使い方
この章では、実際にeasingのプラグインを使った手法を見ていきましょう！
主に、「animate()」を使ったものや「scrollTop()」を活用したアニメーション方法を学んでいきます。
「animate()」を使ってアニメーションさせる方法
まずは、「animate()」を使ったプログラミング手法を見ていきましょう！
これは、冒頭で解説した標準のeasingを使った方法とまったく同じように利用することが可能です。
例えば、同じようにh1要素に対してアニメーションを行いたい場合は、次のように記述します。
$('h1').animate({"marginLeft":"100px"},2000,"easeOutBounce")
animate()の第3引数に注目してください！
「easeOutBounce」と記述していますが、これこそがプラグインによって拡張されたeasingなわけです。
このように名称を文字列で指定するだけで、バリエーション豊かな動きを実現できるのでとても簡単ですね。
「scrollTop()」を使ってアニメーションさせる方法
今度は、「scrollTop()」を使ったプログラミングを見ていきましょう！
「scrollTop()」 は画面のスクロールに対してアニメーションを行える特徴があります。
これを活用すると、例えば画面トップへアニメーションしながらスクロールして戻ることが実現できます。
ボタンをクリックしてアニメーションしながら戻るには、次のように記述します。
$('button').click(function() {
$('html, body').animate({scrollTop:0}, 2000, 'easeOutBounce');
})
この例では、クリックイベント処理内にanimate()を使って「scrollTop」を活用しているのが分かりますね。
第1引数に「scrollTop:0」と記述することで、画面の最上部へ戻ることができます。
すると、animate()によってアニメーションされるわけですが、指定したeasingの動きをしてくれるわけです。
このscrollTop()については、次の記事で基本から応用技までまとめているのでぜひ参考にしてみてください！
まとめ
今回は、jQueryでアニメーションの動きを豊かにしてくれる「easing」について学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・jQuery標準で利用できるeasingは「linear」と「swing」しかない
・プラグインを導入することで利用できるeasingが30種類以上に増える
・CDNを使うことでURLを記述するだけでプラグインをすぐに使える
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
