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

隆重推出 linear(),這是 CSS 中的加/減速函式,可線性插入其點之間,讓您重新建立彈跳和彈簧效果。

CSS 中的加/減速設定

在 CSS 中為元素加上動畫效果或轉換時,您可以使用 animation-timing-functiontransition-timing-function 屬性,透過加/減速函式控制值的變化速率。

CSS 中有幾個預設關鍵字,包括 lineareaseease-inease-outease-in-out。如要自行建立加/減速曲線,請使用 cubic-bezier() 函式,或使用 steps() 加/減速函式採取步驟式方法。

適當運用加/減速設定,可以為動畫元素累積體重,

無法在 CSS 中建立複雜的曲線 (例如彈跳或彈簧效果),但有了 linear(),您現在可以輕鬆進行近似曲線。

linear() 簡介

瀏覽器支援

  • Chrome:113。
  • Edge:113。
  • Firefox:112。
  • Safari:17.2。

在 CSS 中定義加/減速的新方法是使用 linear()。這個函式接受多個停靠站,請以半形逗號分隔。每個停靠站為一組介於 0 到 1 之間的數字。在每個停靠站之間,內插是以線性方式完成,解釋函式的名稱。

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

這些停靠站預設會等移動。在上述程式碼片段中,這表示在 50% 標記處使用 0.25 的輸出值。

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

線性繪製的圖表(0、0.25、1)。

如果您不希望停靠站等距分散,可以選擇傳遞「停靠時間」。傳入一個值做為停止長度時,可定義其起點:

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

在這裡,輸出值 0.25 不會在 50% 標記使用,而是在 75% 中使用。

線性繪製的圖表(0、0.25 75%、1)。

指定兩個值做為停止長度時,您可以定義其起點和終點:

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

輸出結果值為 0.25,且會在時間的 25% 到 75% 之間使用。

線性資料的圖表圖表(0、0.25 25% 75%、1)。

使用 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() 時,結果是看起來與原始曲線相似的曲線,但邊緣的表現略有粗略。

最初的平滑曲線頂端有藍色的簡化曲線,上方為藍色。

比較綠色的動畫方塊與藍色方塊,可看出兩者並不光滑。

但只要加入足夠的停靠點,就能非常接近原始曲線。更新版本如下:

更新曲線,停靠站數量的兩倍。

只要將停靠站數量增加一倍,就能得到順暢的結果。

用於加入動畫的程式碼如下所示:

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

一項實用工具

手動建立這份停靠站清單並不容易。幸好,JakeAdam 建立了工具,協助您將加/減速曲線轉換成 linear() 對應項目

線性加/減速產生器工具的螢幕截圖。
https://linear-easing-generator.netlify.app/ 實際運作的螢幕截圖。

這項工具使用 JavaScript 加/減速函式或 SVG 曲線做為輸入內容,並使用 linear() 輸出簡化曲線。使用滑桿控制所需的停靠站數量以及精確度。

此外,您也可以在右上方選擇下列其中一個預設選項:彈簧效果、彈跳、簡易彈性,或使用 Material Design 強調加/減速。

開發人員工具支援

開發人員工具支援以視覺化的方式呈現及編輯 linear() 的結果。按一下圖示,即可顯示互動式工具提示,讓您直接在停靠站四處拖曳。

Chrome 開發人員工具「Linear()」編輯器的螢幕截圖。
Chrome 開發人員工具「Linear()」編輯器的螢幕截圖。

使用 Chrome 114 時,才可透過開發人員工具提供這項開發人員工具功能。

相片來源:Howie Mapson 針對 Unsplash 提供