隆重推出 linear()
,這是 CSS 中的加/減速函式,可線性插入其點之間,讓您重新建立彈跳和彈簧效果。
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)
的圖表如下所示:
如果您不希望停靠站等距分散,可以選擇傳遞「停靠時間」。傳入一個值做為停止長度時,可定義其起點:
animation-timing-function: linear(0, 0.25 75%, 1);
在這裡,輸出值 0.25
不會在 50%
標記使用,而是在 75%
中使用。
指定兩個值做為停止長度時,您可以定義其起點和終點:
animation-timing-function: linear(0, 0.25 25% 75%, 1);
輸出結果值為 0.25,且會在時間的 25% 到 75% 之間使用。
使用 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
);
一項實用工具
手動建立這份停靠站清單並不容易。幸好,Jake 和 Adam 建立了工具,協助您將加/減速曲線轉換成 linear()
對應項目。
![線性加/減速產生器工具的螢幕截圖。](https://developer.chrome.google.cn/static/docs/css-ui/css-linear-easing-function/image/screenshot-the-linear-ea-6721398d032d1.png?authuser=0000&hl=zh-tw)
這項工具使用 JavaScript 加/減速函式或 SVG 曲線做為輸入內容,並使用 linear()
輸出簡化曲線。使用滑桿控制所需的停靠站數量以及精確度。
此外,您也可以在右上方選擇下列其中一個預設選項:彈簧效果、彈跳、簡易彈性,或使用 Material Design 強調加/減速。
開發人員工具支援
開發人員工具支援以視覺化的方式呈現及編輯 linear()
的結果。按一下圖示,即可顯示互動式工具提示,讓您直接在停靠站四處拖曳。
![Chrome 開發人員工具「Linear()」編輯器的螢幕截圖。](https://developer.chrome.google.cn/static/docs/css-ui/css-linear-easing-function/image/screenshot-chrome-devtoo-10fa39ac3b457.png?authuser=0000&hl=zh-tw)
使用 Chrome 114 時,才可透過開發人員工具提供這項開發人員工具功能。
相片來源:Howie Mapson 針對 Unsplash 提供