CSSのイージング関数を簡単に使えるようにできる「Easing Wizard」

CSSのイージング関数はウェブ要素を手軽にアニメーションさせる便利なツールです。しかし、複雑な動作を指示しようとすると大変な作業となり、殊に細かな調整を行う場合には、試行錯誤による膨大な工数を必要とすることがあります。そんな面倒な作業なしで、イージング関数を簡単かつ感覚的に使用できるようになるサイトが「Easing Wizard」です。

Easing Wizard - CSS Easing Editor and Generator
https://easingwizard.com/

イージング関数が存在しなかった頃、ウェブ要素をアニメーションさせるにはJavaScriptを使用するのが一般的でした。しかし、ウェブ要素の位置を経時的に指定するには座標系に対して計算式を適用する必要があり、一次式で事足りる等速度直線運動ならともかく、複雑な動作を行わせるためには難解な数式を適用する必要がありました。そんな苦労から解放してくれるのがイージング関数です。

イージング関数のうち、最も簡単に使用できるのはlinearです。この関数はパラメーターを指定しない場合、単調な等速度直線運動を行います。

この動作を実現するイージング関数の指定は以下の通りで、「linear」と指定しているだけです。

animation-timing-function: linear;

上記のアニメーション指定はシンプルではあるものの、実際にアニメーションを導入する場合、あまりに単調すぎて不自然な印象を受けます。そこで、パラメーターを指定して動きに変化を持たせます。

この動作を実現するイージング関数の指定は以下の通りです。

animation-timing-function: linear(0, 0.75 25%, 1);

より凝ったパラメーターを指定することで、さらに面白みのある動作を演出できます。ただし、パラメーターはどんどん複雑化し、微調整をしたくてもどこをどうすればいいのか設計した本人にさえわからなくなる場合があります。例えば、バネのような動きを指定するケースを考えてみます。

この動作を実現するイージング関数の指定は以下の通りです。ここまで複雑になってしまうとメンテナンスするのも一苦労です。

animation-timing-function: linear(0, 0.015 0.3%, 0.059 0.6%, 0.128 0.9%, 0.256 1.3%, 0.505 1.9%, 1.168 3.3%, 1.47 4.1%, 1.576 4.5%, 1.632 4.8%, 1.667 5.1%, 1.68 5.4%, 1.673 5.7%, 1.646 6%, 1.601 6.3%, 1.517 6.7%, 1.35 7.3%, 0.869 8.8%, 0.689 9.5%, 0.575 10.2%, 0.549 10.5%, 0.538 10.8%, 0.54 11.1%, 0.557 11.4%, 0.641 12.1%, 0.753 12.7%, 1.1 14.3%, 1.219 15%, 1.293 15.7%, 1.315 16.3%, 1.299 16.9%, 1.238 17.6%, 0.938 19.7%, 0.855 20.4%, 0.802 21.1%, 0.786 21.7%, 0.795 22.3%, 0.835 23%, 1.038 25.1%, 1.102 25.9%, 1.136 26.6%, 1.146 27.2%, 1.138 27.8%, 1.11 28.5%, 0.971 30.6%, 0.932 31.3%, 0.908 32%, 0.901 32.6%, 0.917 33.7%, 1.038 36.5%, 1.06 37.3%, 1.067 38%, 1.053 39.3%, 0.968 42.2%, 0.954 43.5%, 0.965 44.8%, 1.021 47.6%, 1.031 48.9%, 1.024 50.2%, 0.985 53.1%, 0.979 54.4%, 1.014 59.8%, 0.99 65.2%, 1.007 70.7%, 0.995 76.1%, 1.003 81.5%, 1);

見る人の興味を引くアニメーションを行わせるのが大変で面倒なことが理解できたところで、Easing Wizardを開いてみます。画面上部にアニメーションの種類を指定する箇所があり、以下の選択肢から適用したいアニメーションを選びます。

・BÉZIER：cubic-bezier()で指定する動作
・SPRING：バネのような動作
・BOUNCE：跳ね返る動作
・WIGGLE：ピクピクする動作
・OVERSHOOT：一旦行き過ぎて戻る動作

まずは、先程の例で挙げた「バネのような動き」を試したいので、「SPRING」を選択します。

画面右側でBASIS(基本的な動作)を、以下の7つから選択します。

・HEAVY：重みのある動作
・BOUNCY：振動の激しい動作
・DROP：軽めの動作
・GLIDE：滑り込むような動作
・SNAP：弾くような動作
・LAZY：SNAPを緩慢にした動作
・ELASTIC：SNAPをしなやかにした動作

選択した動作が時間経過とともにどういった動きをするのかを、画面中央部にグラフ表示しているので、期待する動作かどうかを目視で把握することができます。

また、画面左側では実際にデモ表示としてアニメーションが動いているので、感覚的に理解することもできます。

少し下にスクロールすると、中央にアニメーションの挙動をカスタマイズするためのコントロールがあります。調整可能な項目は以下の通りです。

・Mass：大きさ
・Stiffness：硬さ
・Damping：減衰の量
・Accuracy：滑らかさ

その右側には、アニメーションのデモ表示を制御するためのコントロールがあります。デフォルトのアニメーションは横方向の反復移動ですが、縦方向に変えたりサイズ変更・回転などのアニメーションに変更することができます。また、単調な等速度直線運動をシャドウ表示して比較したり、アニメーション時間を調整したりもできます。

さらに下にスクロールすると、アニメーションを実現しているイージング関数のコードが表示されています。コードはCSSとTailwind CSSとを選択可能です。右上にある「COPY TO CLIPBOARD」をクリックするとコードをクリップボードにコピーできるので、いい感じに調整したアニメーションのコードを自分のサイトに適用するといった運用が可能です。

「SPRING」以外のアニメーションに着目すると、とりわけ興味深いのが「BÉZIER」です。cubic-bezier()関数は始点(P0)の座標を(0, 0)・終点(P3)を(1, 1)に固定し、中間点(P1, P2)の2点の座標を指定することにより3次ベジェ曲線を定義します。

ただ、コードを見ても今一つどのような曲線となるのかを掴めません。

animation-timing-function: cubic-besier(0.1, 0.6, 0.7, 0.2);

そこでまたもやEasing Wizardを頼りにします。アニメーションの種類から「BÉZIER」を選択すると、BASISは以下の4つとなります。

・IN：始点から徐々に動き出し、最速で終点に至る
・OUT：最速で始点から動き出し、徐々に遅くなって終点で停止する
・IN OUT：始点から徐々に動き出し、途中で最速になり、徐々に遅くなって終点で停止する
・OUT IN：最速で始点から動き出し、途中で遅くなり、最速で終点に至る

BÉZIERの場合は、選択したBASISに応じて、より詳細な動作を選択できます。

BÉZIERのカスタマイズについては他とは異なり、cubic-bezier()関数の下りで説明した中間点の座標を指定します。

・X1：中間点p1のX座標
・Y1：中間点p1のY座標
・X2：中間点p2のX座標
・Y2：中間点p2のY座標

中間点の座標については、グラフ中の中間点をドラッグ＆ドロップして直接操作することもできます。操作に伴うグラフの形状変化を直接確認できるため、この方法でカスタマイズする方が利便性が高いと言えます。

さらに、以下の指定も可能です。

・Extra Space Top：グラフの上にスペースを追加
・Extra Space Bottom：グラフの下にスペースを追加

2つともオンにすると、グラフの上下にスペースが追加され、中間点を上下にはみ出した位置に設定できます。

カスタマイズして生成されたコードは以下のようになります。

animation-timing-function: cubic-bezier(0.665, -0.573, 0.415, 1.764);

CSSに適用すると、ちゃんとアニメーションに反映されました。