CSS のイージング関数 linear() を導入しました。このイージング関数はポイント間で線形的に補間し、バウンス効果やばね効果を再現できます。
CSS のイージング
CSS で要素をアニメーション化または遷移させる場合、animation-timing-function プロパティと transition-timing-function プロパティを使用して、値の変化の速度をイージング関数で制御します。
CSS では、linear、ease、ease-in、ease-out、ease-in-out という複数のキーワードをプリセットとして使用できます。独自のイージング カーブを作成するには、cubic-bezier() 関数を使用するか、steps() イージング関数を使用してステップベースのアプローチを取ります。
イージングは、適切に使用すると、アニメーション要素に勢いをつけ、重みのような感覚を与えることができます。
CSS では、バウンス効果やばね効果などの複雑な曲線は作成できませんが、linear() により、驚くほど正確に近似できるようになりました。
linear() の紹介
対応ブラウザ
- 113
- 113
- 112
- x
CSS でイージングを定義する新しい方法は、linear() です。この関数は、カンマで区切った停車地の数を受け入れます。各駅 / 停留所は 0 ～ 1 の範囲の 1 つの数値です。各駅 / 停留所の間では、直線的に補間が行われ、関数の名前が説明されます。
animation-timing-function: linear(0, 0.25, 1);
デフォルトでは、これらの停車場所は等間隔に広がります。上記のスニペットでは、0.25 の出力値が 50% のマークで使用されることを意味します。
可視化すると、linear(0, 0.25, 1) のグラフは次のようになります。
停車地の間隔を均等に分散させたくない場合は、必要に応じて 停車地の長さを渡すこともできます。停車地の長さとして 1 つの値を渡す場合は、次のように始点を定義します。
animation-timing-function: linear(0, 0.25 75%, 1);
ここで、0.25 の出力値は 50% のマークではなく 75% で使用されます。
2 つの値を停車場所の長さとして指定する場合は、次のように、その始点と終点の両方を定義します。
animation-timing-function: linear(0, 0.25 25% 75%, 1);
時間の 25% ～ 75% の間は、0.25 の出力値が使用されます。
linear() で複雑な曲線を作成する
上記の例は非常にシンプルなイージングですが、linear() を使用すると、複雑なイージング関数を非常に簡単に再作成できますが、精度が損なわれるというデメリットがあります。
次のバウンス イージング カーブを見てみましょう。これは CSS で直接表現できないイージングの一種で、JavaScript を使用して定義します。
function easing(pos) {
const t = 7.5625;
const e = 2.75;
return pos < 1 / e
? t * pos * pos
: pos < 2 / e
? t * (pos -= 1.5 / e) * pos + 0.75
: pos < 2.5 / e
? t * (pos -= 2.25 / e) * pos + 0.9375
: t * (pos -= 2.625 / e) * pos + 0.984375;
}
コードではあまり詳しくないかもしれませんが、可視化ではあまり詳しくない場合があります。次に、出力を青い曲線として表示します。
この曲線は、曲線上に複数の停車場所を追加することで簡略化できます。緑色のドットはそれぞれ停車地を表しています。
linear() に渡すと、元の曲線と似た曲線ですが、端が少し粗くなります。
緑色のアニメーション ボックスと青色のアニメーション ボックスを見比べると、滑らかではないことが見て取れます。
ただし、経由地をたくさん追加すると、元の曲線を描くことができます。更新版は次のとおりです。
経由地の数を 2 倍にするだけで、滑らかな結果が得られます。
アニメーションに使用するコードは次のようになります。
animation-timing-function: linear(
/* Start to 1st bounce */
0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
/* 1st to 2nd bounce */
0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
/* 2nd to 3rd bounce */
0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
/* 3rd bounce to end */
0.988, 0.984, 0.988, 1
);
役に立つツール
このような経由地のリストを手動で作成することは非常に面倒です。ありがたいことに、Jake と Adam は、イージング カーブをそれに対応する linear() に変換するためのツールを作成しました。
このツールは、JavaScript のイージング関数または SVG 曲線を入力として受け取り、linear() を使用して簡易曲線を出力します。スライダーを使用して、必要な経由地の数と精度を調整します。
右上では、Spring、Bounce、Simple Elastic、または Material Design の強調されたイージングのいずれかのプリセットを選択することもできます。
DevTools のサポート
DevTools では、linear() の結果の可視化と編集をサポートしています。アイコンをクリックすると、停車地をドラッグできるインタラクティブなツールチップが表示されます。
この DevTools 機能は、Chrome 114 に付属する DevTools で使用できます。
写真撮影: Howie Mapson（出典: Unsplash）