カスタム イージング

自作のアニメーションも自在にカスタマイズできます。

Sam Thorogood

CSS に含まれているイージング キーワードを使用したくない場合や、ウェブ アニメーションや JavaScript フレームワークを使用する場合があります。このような場合、通常は独自の曲線（または方程式）を定義することで、プロジェクトのアニメーションの感触を細かく制御できます。

まとめ

  • カスタム イージングを使用すると、プロジェクトに個性を与えることができます。
  • デフォルトのアニメーション曲線（ease-out、ease-in など）に類似した 3 次ベジェ曲線を、さまざまな場所で強調できます。
  • JavaScript は、Elastic アニメーションやバウンス アニメーションなど、アニメーションのタイミングや動作をより細かく制御する必要がある場合に使用します。

CSS でアニメーション化する場合は、3 次ベジェ曲線を定義してタイミングを定義できます。実際、キーワード ease、ease-in、ease-out、linear は、事前定義されたベジェ曲線にマッピングされます。詳細については、CSS 遷移仕様とウェブ アニメーション仕様をご覧ください。

これらのベジェ曲線は 4 つの値、つまり 2 つの数値のペアを取り、各ペアは 3 次ベジェ曲線のコントロール ポイントの X 座標と Y 座標を表します。ベジェ曲線の始点の座標は (0, 0)、終点の座標は (1, 1) です。この 2 つの制御点の X と Y の値を設定します。2 つのコントロール ポイントの X 値は 0 ～ 1 でなければならず、各コントロール ポイントの Y 値は [0, 1] の制限を超えることがありますが、その程度については仕様が明確になっていません。

各コントロール ポイントの X と Y の値を変更すると、曲線が大きく異なるため、アニメーションの雰囲気が大きく変わります。たとえば、最初のコントロール ポイントが右下の領域にある場合、アニメーションの開始は遅くなります。左上のエリアにある場合は、すぐに起動します。反対に、2 つ目のコントロール ポイントがグリッドの右下の領域にある場合は、終点が速くなり、左上の場合は、終点が遅くなります。

比較のために、典型的な Ease-in-Out 曲線とカスタム曲線の 2 つの曲線を示します。

イーズインアウトのアニメーション カーブ

カスタム アニメーション曲線。

カスタム イージングでアニメーションを見る

カスタム曲線の CSS は次のとおりです。

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

最初の 2 つの数値は 1 つ目のコントロール ポイントの X 座標と Y 座標で、2 つ目の 2 つの数値は 2 つ目のコントロール ポイントの X 座標と Y 座標です。

カスタム曲線を作成するのはとても楽しく、アニメーションの感触を自在にコントロールできます。たとえば、上の曲線の場合、この曲線は従来の Ease-in-out 曲線に似ていますが、Ease-in（開始）の部分が短く、終盤に長い減速があります。

こちらのアニメーション曲線ツールを試して、曲線がアニメーションの雰囲気にどのように影響するかご確認ください。

JavaScript フレームワークを使用して詳細に制御する

場合によっては、3 次ベジェ曲線よりも細かい制御が必要になります。弾力性のあるバウンス感が必要な場合は、JavaScript フレームワークの使用を検討してください。これは CSS でもウェブ アニメーションでも実現が難しい効果です。

TweenMax

強力なフレームワークの 1 つが GreenSock の TweenMax（または、非常に軽量にしたい場合は TweenLite）です。小さな JavaScript ライブラリでさまざまな制御が可能で、非常に成熟したコードベースであるためです。

弾力性のあるイーズのアニメーションを見る

TweenMax を使用するには、ページに次のスクリプトを追加します。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

スクリプトを作成したら、要素に対して TweenMax を呼び出し、使用するプロパティとイージングを指示できます。使用できるイージング オプションは多数ありますが、以下のコードでは elastic ease-out を使用しています。

    var box = document.getElementById('my-box');
    var animationDurationInSeconds = 1.5;

    TweenMax.to(box, animationDurationInSeconds, {
      x: '100%',
      ease: 'Elastic.easeOut'
    });

TweenMax のドキュメントでは、ここで利用できるすべてのオプションが強調されているので、一読する価値があります。