Easing/jQuery
easingとは、エフェクトの動きを加速/減速させるための関数です。例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。
しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。(下記サンプル参照)
そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。
特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。
このeasingプラグインでは、version 1.3時点で32パターンが提供されています。
これ以外にもeasingは比較的容易に自作することが出来、animateなどと組み合わせることで豊かな表現が可能になります。
(作り方についての説明は、ここでは割愛します。コードを見れば、簡単に理解できると思います)
以下に、デフォルトのjQueryで選べる2つのeasingに、プラグインで提供されている32種類を加えたサンプルを載せておきます。
クリックすると、動作を確認できます。
また、easing名の横にある折れ線グラフでも、おおまかな動作がイメージできるかと思います。横軸が時間の経過で、縦軸が値の変化量になりますので、よろしければ参考にして下さい。