11 カスタムイージング

CSS Animationsでは、animation-timing-functionプロパティに cubic-bezier()関数が返す値を指定することで、独自のタイミング関数(以降、イージング関数)が使用できます。Web Animations APIでも、タイミングパラメータのeasingプロパティに cubic-bezier()関数を指定することで、独自のイージング関数が使用できます。

Web Animations APIではさらに、JavaScript関数を独自のイージング関数として、アニメーションに適用することができます。

「10-10-3 getComputedTiming().progressの利用」では、アニメーションタイマーの進捗値を、durationを1に設定したAnimationオブジェクトのcurrentTimeに直接割り当てましたが、アニメーションタイマーとAnimationオブジェクトの間には、アニメーションタイマーの進捗値を受け取り、それを別の値に置き換えるJavaScript関数を挟み込むこともできます。

下図はこの考えを示した図です。アニメーションタイマーからはprogress値を取得します。これは0から1までの小数値です。独自のJavaScriptではこの数値を受け取り、独自の計算方法で値を出力します。下図では、y = x^2を定義して、受け取ったprogress値を2乗して出力しています。すると、この出力値は、アニメーションの初めはゆるやかに変化し、終わりに近づくほど激しく変化するようになります(つまりイーズインです)。durationを1に設定したAnimationオブジェクトには、この変換した値を渡します。

コメントを残す

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

CAPTCHA