jQueryアニメーションにイージング（easing）処理をつけるプラグイン【イージング動作サンプル一覧】

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

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

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

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」の場合
[javascript]
◆SCRIPT
$(‘○○○○’).animate({○○○○},1000,’linear’);
[/javascript]

続いて２つ目。

jquery.easie.js

jquery.easie.js

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

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

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

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

こちらの使い方も同様に使用するイージング名を
「.animate()」の動作の後ろに記述するだけです。
※「easieLinear」の場合
[javascript]
◆SCRIPT
$(‘○○○○’).animate({○○○○},1000,’easieLinear’);
[/javascript]

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

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

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