jQueryで要素にアニメーション動作をつけた際、単調な動きだけでなく、加速・減速など動きに強弱のついたエフェクト、イージング(easing)処理をつけることが出来ます。

jQueryのノーマル状態では、イージング処理は「linear」と「swing」の2つが用意されていますが、プラグインを使うことによってアニメーションに多種多様なイージング処理をつけることができるようになります。

そんなイージング処理を、様々なパターンで簡単につけることが出来るプラグインを2つ、イージング動作サンプルと併せて紹介してみます。

jQuery Easing Plugin[jquery.easing.js]


jQuery Easing Plugin[jquery.easing.js]
jQuery Easing – jQuery 日本語リファレンス

もはやjQueryのイージング処理では定番のプラグイン。

プラグインファイル「jquery.easing.js」を読み込んだ後、jQueryアニメーション「.animate()」の処理を記述する際に、使用するイージング処理の種類(名前)を記述します。

jQueryノーマル状態で使える「linear」と「swing」の2つのイージング処理と併せて、このjQuery Easing Plugin[jquery.easing.js]でつけられるイージング処理を以下に一覧にしてまとめてみました。

リスト左にあるイージング名をもとに、それぞれ黒い■をクリックしてみてください。
※アニメーション速度は「MotionSpeed」の値を変えることでスピードを変えることが出来ます。

サンプルリストを別枠で表示

イージング処理の記述方法は簡単で「.animate()」の動作の後ろに付けたいイージング名を記述するだけです。
※「linear」の場合

◆SCRIPT
$('○○○○').animate({○○○○},1000,'linear');

続いて2つ目。

jquery.easie.js


jquery.easie.js

こちらも一つ目の「jQuery Easing Plugin」と同様に、プラグインファイル「jquery.easie.js」を読み込んだ後、jQueryアニメーション「.animate()」の処理を記述する際に使用するイージング処理の種類(名前)を記述するだけです。

この「jquery.easie.js」でつけられるイージング処理のサンプル動作一覧は以下になります。

リスト左にあるイージング名をもとに、それぞれ黒い■をクリックしてみてください。
※アニメーション速度は「MotionSpeed」の値を変えることでスピードを変えることが出来ます。

サンプルリストを別枠で表示

こちらの使い方も同様に使用するイージング名を「.animate()」の動作の後ろに記述するだけです。
※「easieLinear」の場合

◆SCRIPT
$('○○○○').animate({○○○○},1000,'easieLinear');

以上2つのjQueryアニメーションにイージング処理をつけることが出来るプラグインの紹介でした。

イージング処理をつけることで、単調なアニメーション動作ではなく、よりリアリティのある動きに仕上げることが簡単に出来ます。

jQueryアニメーションにイージング処理をつける際の参考にぜひ。。。