11-1 そもそもイージング関数は一体何を…

イージング関数とは、アニメーションに指定されたキーフレーム間のプロパティ値を補間するときに使用される関数で、次のようなグラフで表されます。一般的なイージング関数は、0秒の始まりから1秒の終わりまでの間に、0から1までの数値を出力します。

イージング関数は、Flash開発者の天才、Robert Pennerが考案したとされ、「Robert Penner’s Easing Functions」サイトでは、FlashのActionScriptやC言語、JavaScriptなど、さまざまな言語で使用できるバージョンが公開されています。

イージングしないイージング関数(linear)

イージングしないイージング関数は、次の関数で表されます。

/* t:現在のタイム値(位置)
   b:プロパティの初めの値
  c:プロパティの初めの値と終わりの値との差(変化量)
  d:アニメーションの時間
*/
const noEasing(t, b, c, d) => {
    return c * t / d + b;
}

この関数がどのように動作するかを、left:50pxにある矩形を1秒かけてleft:200pxに移動するアニメーションの場合で見てみましょう。

  1. スタート時、noEasing()関数には、(0秒、50px、200-50px、1秒)を意味する( 0, 50, 150, 1)が渡される。c * t / d + b = 150 x 0/1 + 50 = 50なので、要素のleft値は変化しない。
  2. アニメーションが半分進んだときには、(0.5, 50, 150, 1)が渡される。前と異なるのはt値のみ。これを計算すると、150 x 0.5/1 + 50 = 75 + 50 = 125となり、left値は125pxとなる。
  3. アニメーションが終わるときには、(1, 50, 150, 1)が渡されるので、計算すると、150 x 1/1 + 50 = 200となる。

実際のイージング関数は、変化量のcを1、初めの値のbを0として計算し、結果を0から1の間の数値として返します。つまり、t/dを返します。これは、”現在の時間値/全体の時間”なので、その時点でアニメーションが全体の何パーセントの完了したかを表す完了パーセント値、進捗値だと考えられます。

ということは、t/dはAnimation.effect.getComputedTiming()progressに等しい、ということです。

ease-inはなぜゆるやかに入るのか?

ease-inは、http://gizma.com/easing/によると、次の関数で表されます。

const easeInQuad(t, b, c, d) => {
    t /= d;
    return c * t * t + b;
}

この関数では、tの値が小さいとき、その2乗はかなり小さくなり、時間が経過してtの値が大きくなると、その2乗は元の値に近くなります。その結果、初めは小さく変化し、終わりに近づくほど大きく変化することになります。

tを掛ける回数が多くなるほど、激しく変化する傾向は大きくなります。イージング関数に関数につけられている名前のQuadは2乗を、Cubicは3乗、Quartは4乗、Quintは5乗を意味しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA