使用 Linear() 加/減速函式在 CSS 中建立複雜的動畫曲線

隆重推出 linear()，這是 CSS 中的加/減速函式，可在點之間線性內插，讓您重現彈跳和彈簧效果。

Bramus

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);

這些停靠點預設會等距分布。在上述程式碼片段中，這表示 0.25 的輸出值會在 50% 標記處使用。

以視覺化方式呈現，linear(0, 0.25, 1) 的圖表如下所示：

如不希望停靠站間距相同，可以選擇傳入停靠站長度。將一個值做為停止長度傳遞時，您會定義其起點：

animation-timing-function: linear(0, 0.25 75%, 1);

在此，系統不會在 50% 標記使用 0.25 的輸出值，但會在 75% 使用。

指定兩個值做為停駐點長度時，您會定義停駐點的起點和終點：

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

輸出值為 0.25 時，系統會在 25% 到 75% 的時間內使用該值。

建立複雜曲線

雖然先前的範例是較簡單的緩和效果，但如果願意犧牲部分精確度，可以使用 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() 時，結果會是類似原始曲線的曲線，但邊緣會稍微粗糙。

比較綠色動畫方塊和藍色方塊，您會發現綠色方塊不夠平滑。

不過，只要加入足夠的停靠點，就能相當準確地逼近原始曲線。以下是更新後的版本：

只要將停靠點數量加倍，就能獲得平滑的結果。

用於動畫的程式碼如下所示：

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() 輸出簡化曲線。使用滑桿控制停靠站數量和精確度。

您也可以在右上角選擇其中一個預設值，包括「彈簧」、「彈跳」、「簡單彈性」或「Material Design 強調的加/減速」。

開發人員工具支援

開發人員工具支援視覺化及編輯 linear() 的結果。按一下圖示，即可顯示互動式工具提示，讓你拖曳停靠點。

這項開發人員工具功能適用於 Chrome 114 以上版本的開發人員工具。