「jQuery Easing Plugin」でjQueryのアニメーションにイージング効果をつける

jQueryではanimateという関数を使ってアニメーション効果を得ることができます。

アニメーションといえば、Flashなどでは初速と終速をコントロールしたイージング効果を加えることができますが、jQuery単体で利用できるのは「linear」と「swing」の二つの効果のみです。

jQueryでさまざまなイージング効果を実現するためには、以下のプラグインを組み込みます。
jQuery Easing Plugin

実装方法

実装方法ですが、本サイトからソースを取得し、jQueryをベースに読み込みます。

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

例えば、animateでイージング効果「easeOutCubic」を実装する場合、以下のように指定します。

$('#sample').animate({left: "+=100px", top: "+=100px", opacity: 0}, 1000, 'easeOutCubic');

この場合、サンプルオブジェクト「id=sample」がフェードアウトしながら右下に移動するのに、イージング効果がプラスされます。
jQueryの仕様については割愛します。

イージングのバリエーション

「jQuery Easing Plugin」で実現できるイージングの種類は豊富です。

イージングについては時間軸とアニメーション進行度の2次元グラフでその効果を説明することがありますが、以下のサイトで確認することができます。どのような種類があるのか確認するときに重宝します。
jQuery Easing – jQuery 日本語リファレンス

また、実際の動きを見たい場合には以下のサイトが見やすくて良いです。
jQuery Easing Plugin | エフェクト動作パターン集プラグイン

JSでのアニメーションはPCに大きな負荷となるので、あまりにも派手で大きなアクションを実装すると、動きがカクカクとして、逆にユーザにストレスを与えてしまいます。
Flashにとって代わるものではなく、JSでのアニメーション実装はほどほどにを心掛けたいものです。