CSSイージング関数 レベル2

1. はじめに

このセクションは規範的ではありません。

値の変化速度を制御したい場面は多くあります。 例えば、要素の移動速度を徐々に上昇させることで、要素が勢いを持っているような重みを感じさせることができます。 これは、直感的なユーザーインターフェース要素や、物理的な性質を持つように振る舞うアニメーション小道具を作る際に役立ちます。 一方で、アニメーションが分割されたホイールのように、常に同じ位置でセグメントが表示されるように、動きを離散的なステップで進めたい場合もあります。

同様に、グラデーション補間の変化速度を制御することで、凹面や凸面を示唆したり、縞模様などの異なる視覚効果を作り出すことができます。

イージング関数は、 入力進捗値を受け取り、それに対応する変換された出力進捗値を生成することで、これらの値を変換する手段を提供します。

1.1. 値の定義

この仕様書では、値の定義構文を [CSS-VALUES-3] から使用します。 この仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。

2. イージング関数

イージング関数は 入力進捗値を受け取り、出力進捗値を生成します。

イージング関数は純粋関数でなければならず、同じ入力に対して必ず同じ出力進捗値を返します。

入力進捗値は [-∞, ∞] の範囲の実数です。 通常、入力進捗値は [0, 1] の範囲ですが、イージング関数が連鎖する場合はこの限りではありません。

出力進捗値は [-∞, ∞] の範囲の実数です。

一部のイージング関数では、追加のブール型before flag入力も取ります（詳細は後述）。

この仕様では、以下に定義する4種類のイージング関数を定義します。

イージング関数を指定する構文は以下の通りです：

2.1. 線形イージング関数: linear()

線形イージング関数は、イージング関数であり、 ポイント間を線形補間します。

線形イージング関数はポイント（リスト）を持ちます。これは線形イージングポイントのリストです。 新規作成時は空のリストです。

線形イージングポイントは、以下の項目を持つ構造体です：

input

数値または null

注: これは線形イージング関数の作成時のみ null となります。

output

数値

2.1.1. 構文

線形イージング関数の構文は以下の通りです：

<linear-easing-function> = linear(<linear-stop-list>)
<linear-stop-list> = [ <linear-stop> ]#
<linear-stop> = <number> && <linear-stop-length>?
<linear-stop-length> = <percentage>{1,2}

linear()は、 線形イージング関数にパースされます。その際、線形イージング関数の作成を呼び出し、 <linear-stop-list>をリストとして、<linear-stop>のリストを渡します。

2.1.2. パース

2.1.3. シリアライズ

2.1.4. 線形イージング関数の出力

2.1.5. 例

linear()は、複数のポイント間を線形補間するイージング関数を定義できます。

例えば、linear(0, 0.25, 1)は、0から0.25、そして1へ線形に動くイージング関数を生成します：

デフォルトでは、明示的な"input"がないエントリ間の値は均等に分布されます。 input値は<percentage>で指定できます。

例えば、linear(0, 0.25 75%, 1)は、次のイージング関数を生成します。 これは0から.25への移行に全体の75%の時間を使い、 最後の25%で.25から1へ移行します：

1つの出力に対して2つのinput値を指定すると、同じ出力値を持つポイントが2つ生成されます。

例えば、linear(0, 0.25 25% 75%, 1)はlinear(0, 0.25 25%, 0.25 75%, 1)と同じで、 次のイージング関数を生成します：

inputが指定範囲外の場合、最も近い2点の軌道が継続されます。

例えば、前述の関数の暗黙的な値は以下の通りです：

linear()の一般的な用途は、多くのポイントを指定して曲線のような動きを作ることです。

例えば、linear()を使って再利用可能な「バウンス」イージング関数を作る例：

:root {
  --bounce: linear(
    /* 開始から1回目のバウンス */
    0, 0.063, 0.25, 0.563, 1 36.4%,
    /* 1回目から2回目のバウンス */
    0.812, 0.75, 0.813, 1 72.7%,
    /* 2回目から3回目のバウンス */
    0.953, 0.938, 0.953, 1 90.9%,
    /* 3回目のバウンスから終了まで */
    0.984, 1 100% 100%
  );
}

.example {
  animation-timing-function: var(--bounce);
}

定義の最後は1 100% 100%として2つの最終ポイントを作成し、1より大きいinputは常に1を出力します。

より多くのポイントを使えば、アニメーションが遅い場合など滑らかな結果も得られます。

2.2. 線形イージングキーワード: linear

linearキーワードは、 入力値全てに対して出力進捗値が 入力進捗値と等しい 同一性の線形イージング関数を生成します。

これはlinear(0, 1)と同じ結果となります。

注: このキーワードは線形イージング関数を生成しますが、 linearキーワードの使用は常にそのままlinearとしてシリアライズされます。 一方、関数形式のlinear(0, 1)はlinear(0 0%, 1 100%)としてシリアライズされます。 これらの規則はシリアライズに記載されています。

2.3. 三次ベジェイージング関数: ease, ease-in, ease-out, ease-in-out, cubic-bezier()

三次ベジェイージング関数は イージング関数の一種であり、 四つの実数値で定義されます。 これらの値は三次ベジェ曲線の2つの制御点P1とP2を指定し、端点P0とP3はそれぞれ(0, 0)と(1, 1)に固定されています。 P1とP2のx座標は[0, 1]の範囲に制限されます。

三次ベジェイージング関数の構文は以下の通りです （[CSS-VALUES-3]の記法を使用）：

各値の意味は次の通りです：

ease

cubic-bezier(0.25, 0.1, 0.25, 1)と同等です。

ease-in

cubic-bezier(0.42, 0, 1, 1)と同等です。

ease-out

cubic-bezier(0, 0, 0.58, 1)と同等です。

ease-in-out

cubic-bezier(0.42, 0, 0.58, 1)と同等です。

cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)

三次ベジェイージング関数を指定します。 四つの数値は曲線のP1、P2を(x1, y1, x2, y2)として指定します。 どちらのx値も[0, 1]の範囲でなければならず、範囲外の場合は定義が無効です。

上記のキーワード値で生成されるイージング関数は以下の通りです：

2.3.1. 三次ベジェイージング関数の出力

入力進捗値から出力進捗値へのマッピングは、指定したx値（input progress value）に対応するy値（output progress value）を求めることで行われます。 この曲線の評価方法は[FUND-COMP-GRAPHICS]などで解説されています。

入力進捗値が[0, 1]の範囲外の場合、 曲線は最も近い端点の接線を用いて無限に拡張されます：

• 入力進捗値が0未満の場合：

  1. P1のx値が0より大きければ、P1とP0を通る直線の接線を使います。

  2. それ以外でP2のx値が0より大きければ、P2とP0を通る直線の接線を使います。

  3. それ以外の場合、全ての入力進捗値（[-∞, 0)）について出力進捗値を0とします。

• 入力進捗値が1より大きい場合：

  1. P2のx値が1未満であれば、P2とP3を通る直線の接線を使います。

  2. それ以外でP1のx値が1未満であれば、P1とP3を通る直線の接線を使います。

  3. それ以外の場合、全ての入力進捗値（(1, ∞]）について出力進捗値を1とします。

2.4. ステップイージング関数: step-start, step-end, steps()

ステップイージング関数は イージング関数の一種で、入力時間を指定した数の等しい長さの区間に分割します。 区間数stepsとステップ位置で定義されます。 構文は以下の通りです：

各値の意味は次の通りです：

step-start

steps(1, start)として計算されます。

step-end

steps(1, end)として計算されます。

steps(<integer>, <step-position>?)

第1引数は関数の区間数を指定します。 2番目の引数がjump-noneの場合、1より大きい正の整数でなければならず、 それ以外は0より大きい正の整数でなければなりません。

第2引数（省略可能）は、以下のいずれかでステップ位置を指定します：

jump-start

最初の上昇は入力進捗値が0の時に発生します。

jump-end

最後の上昇は入力進捗値が1の時に発生します。

jump-none

全ての上昇は(0, 1)範囲内で発生します。

jump-both

最初の上昇は入力進捗値が0の時、 最後の上昇は入力進捗値が1の時に発生します。

start

jump-startと同様に動作します。

end

jump-endと同様に動作します。

第2引数を省略した場合、値はendと見なされます。

これらの値の例は以下の通りです：

2.4.1. ステップイージング関数の出力

ステップが発生する正確なポイントでは、関数の結果は概念的にステップの頂点（上端）です。ただし、追加でbefore flagがステップイージング関数に入力として渡され、trueの場合は、 関数の結果がステップポイントでステップの下端（底）となります。

animation: moveRight 5s 1s steps(5, start);

output progress valueを計算する目的では、 step positionのstartは jump-startと同等とみなします。 同様にendはjump-endと同等とみなします。 そのため、以下のアルゴリズムではstartやendは明示的に参照しません。

注: ユーザーエージェントはシリアライズの目的で（§ 2.5 シリアライズ参照） jump-startとstartを区別する必要があります。

output progress valueは、 input progress valueとbefore flagから次の手順で計算されます：

1. current stepを floor(input progress value × steps) として計算します。

2. step positionプロパティが以下のいずれかの場合：

   • jump-start

   • jump-both

   current stepを1加算します。

3. 次の2条件が両方真の場合：

   • before flagがセットされている

   • input progress value × stepsのmod 1がゼロ （つまりinput progress value × stepsが整数値）の場合

   current stepを1減算します。

4. input progress value ≥ 0 かつ current step < 0 の場合、 current stepをゼロにします。

5. step positionに基づいてjumpsを次のように計算します：

   jump-start または jump-end

   steps

   jump-none

   steps - 1

   jump-both

   steps + 1

6. input progress value ≤ 1 かつ current step > jumps の場合、 current stepをjumpsにします。

   この手順の4・6は、input progress valueが[0, 1]の範囲の場合、 ステップイージング関数がその範囲を超えるoutput progress valueを生成しないことを保証します。

   例えば、数学的にはstep positionが jump-startのステップイージング関数は、 input progress valueが1のとき1より上にステップアップするように 期待されるかもしれませんが、実際にはアニメーションが前方にfillする場合は output progress valueが1になることを期待します。

   同様の状況は、step positionが jump-endのステップイージング関数を アニメーションの遅延フェーズに適用した場合にも起こります。

7. output progress valueは current step / jumpsです。

2.5. シリアライズ

イージング関数は[CSSOM]で定義された共通のシリアライズパターンを使ってシリアライズされますが、 以下の追加要件があります：

• キーワード値ease、linear、ease-in、ease-out、 ease-in-outは そのままシリアライズされ、同等のcubic-bezier()やlinear()関数に変換されることはありません。

• ステップイージング関数は、steps()関数や step-start、 step-endキーワードで指定されている場合も 次のようにシリアライズされます：

  1. step positionがjump-endまたはendの場合は steps(<integer>)としてシリアライズします。

  2. それ以外の場合はsteps(<integer>, <step-position>)としてシリアライズします。

• linear easing functionをlinear()で作成した場合は、 シリアライズ済み算出値を取得してシリアライズします。

プライバシーに関する考慮事項

この仕様に関して新たなプライバシーの考慮事項は報告されていません。

本仕様はウェブプラットフォームに直接新しい機能を導入するものではなく、他の仕様が参照可能な共通定義を提供するものです。

セキュリティに関する考慮事項

本仕様で定義された機能を参照する仕様は、イージング関数が通常 input progress valueとして[0,1]の範囲の値を取り、 output progress valueとして[0,1]の範囲の値を生成することが多いですが、 必ずしもそうとは限らないことを考慮する必要があります。 イージング関数の適用時には、この範囲外の入力や出力に対する挙動を定義し、 新たなセキュリティ上の懸念を導入しないようにするべきです。

3. 変更点

3.1. Level 1からの追加点

• linear()関数が追加されました。

4. 謝辞

この仕様は、L. David Baron、Dean Jackson、David Hyatt、Chris Marrinが編集したCSS Transitions仕様を基にしています。 編集者はまた、Douglas Stockwell、Steve Block、Tab Atkins、Rachel Nabors、Martin Pitt、および Animation at Workスラックコミュニティのフィードバックと貢献に感謝いたします。