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()
の概要
対応ブラウザ
CSS でイージングを定義する新しい方法として、linear()
があります。この関数は、カンマ区切りで複数の停留所を指定できます。各停留所は 0 ~ 1 の単一の数値です。各停留所の間では、関数の名前を説明するリニアな方法で補間が行われます。
animation-timing-function: linear(0, 0.25, 1);
デフォルトでは、停車地は等間隔に散らばっています。上記のスニペットでは、50% の時点で 0.25
の出力値が使用されます。
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()
を使用して簡素化された曲線を出力します。スライダーを使用して、必要な停車地の数と精度をコントロールします。
右上にあるプリセットから、[スプリング]、[バウンス]、[シンプルな弾性]、[マテリアル デザインの強調イージング] のいずれかを選択することもできます。
DevTools のサポート
DevTools で、linear()
の結果を可視化して編集できるようになりました。アイコンをクリックすると、停留所をドラッグできるインタラクティブなツールチップが表示されます。
この DevTools 機能は、Chrome 114 に同梱されている DevTools で利用できます。
写真提供: Howie Mapson(Unsplash)