檢查一個 CSS cubic-bezier() 時間函式的結果,代表要比較同一條曲線的三種呈現方式——它畫出來的路徑、它在固定時間比例下的數值進度,以及一個依照那個精確緩動效果移動的動畫元素——然後才把這段宣告貼進正式環境。一個你看不到它移動的時間函式,是一個你沒辦法信任的時間函式。CSS Cubic Bezier Generator 把這條曲線,用一個方形圖表、一張針對輸入進度 0、0.25、0.5、0.75 與 1 的五列取樣表,以及一個在 900 毫秒內、逐字使用你產生出來的宣告,讓一個圓形在兩個水平位置之間切換的 Run 預覽,全部呈現出來。當你拖曳控制點時,這三種呈現方式會同時更新,所以一次編輯就能讓你確認這個緩動效果感覺對不對。這些驗證,沒有一個能取代在你真實介面裡測試這段宣告,但這三種呈現方式加在一起,在任何 CSS 進到你的樣式表之前,就能回答大部分「這條曲線是不是真的做了我以為它會做的事」這類問題。
對三次貝茲曲線來說,「檢查結果」代表什麼
一個 cubic-bezier() 數值,是包在一個 CSS 函式裡的四個數字,所以最直覺的檢查,是語法是不是有效:x1 與 x2 必須落在零到一的閉區間內,而 y1 與 y2 可以是這個介面接受的任何有限數,這個產生器則把它們限制在負十到正十之間。通過這項檢查,只能證明這段宣告不會被瀏覽器忽略;它並不能說明這段宣告產生出來的動作,是不是符合你原本的意圖。以實際的意義來說,檢查結果代表要回答另外三個問題:當一段固定比例的時間過去之後,動畫數值進展到哪裡了;這條曲線產生的超出或預先動作,是不是你真正想要的;以及當這條曲線,搭配你元件真實的屬性、距離與持續時間播放時,感覺對不對。
前兩個問題,完全可以在這個工具裡得到答案。第三個問題,則只能在動畫實際運行的地方才能回答。CSS Easing Functions Level 1 規範,是語法與有效性規則的主要來源,它把 cubic-bezier() 定義成一條從進度點零、零到一、一的參數曲線,其形狀由你提供的兩個中間控制點決定。因此,正確地讀懂一條曲線,代表要照瀏覽器讀它的方式來讀,而不是照向量編輯器裡貝茲控點會給你的暗示來讀。
三種驗證呈現方式:圖表、取樣與預覽
這個產生器透過三種協調一致的呈現方式,把同一條曲線呈現出來,而每一種都能抓到不同類型的錯誤。方形圖表,會把參數曲線畫在一個穩定的零到一框架裡,所以你可以一眼比較一般的時間曲線,並看出極端的 y 值什麼時候會把路徑推出可視區域之外。這張圖表很有參考價值,但一條在紙上看起來沒問題的曲線,在執行期仍然可能讓你意外,因為 x 軸是經過的輸入進度,而不是曲線參數。
取樣表直接回答了這個延伸問題。對於 0、0.25、0.5、0.75 與 1 這幾個輸入值,求解器都會找出一個 x 座標符合要求的曲線參數,再算出對應的 y,所以標示為 0.5 的那一列,告訴你的是持續時間過了一半時的輸出進度,而不是參數為 0.5 時的 y 值。這個求解器使用有界的牛頓迭代,必要時再用二分法收尾,即使控制點讓曲線變得陡峭,結果也能保持穩定。這避免了一個常見錯誤:直接從圖上讀出 t 等於 0.5,就以為那代表動畫的中間點。
動畫預覽會拿這個產生器要複製出來的、逐字的 transition-timing-function 字串,套用在單一個圓形的 900 毫秒 transform 過渡上。因為預覽使用的正是你會貼進 CSS 裡的那段宣告,所以任何你在正式環境看到、卻在預覽裡看不到的落差,來源都是屬性、距離、持續時間,或渲染環境,而不是緩動效果本身。
如何驗證產生出來的 CSS 三次貝茲曲線
- 點選五個標準緩動關鍵字中的一個作為起點,或是自行在輸入欄位裡輸入 x1、y1、x2、y2 座標。
- 觀察方形圖表、五列取樣表,以及 Run 預覽,在每次輸入改變時同步更新;這三種呈現方式,共用同一組底層數值。
- 在對你的動作最重要的輸入進度點上,讀取取樣表,例如 0.25 代表早期加速、0.75 代表後期收尾,並確認輸出進度符合你的預期。
- 點擊 Run preview,觀察一個圓形用目前的緩動字串,在 900 毫秒內於兩個水平位置之間移動;再點一次,則會在同一條曲線下反向移動。
- 如果圖表路徑跑出了可視方框,就靠讀取取樣表裡的 y 值並觀察預覽,來確認這個超出或預先動作是刻意的,因為這張圖表是一個固定的框架,並不會被曲線本身裁切。
- 複製完整的宣告,包含結尾的分號,把它貼進動畫實際會運行的那個元件的樣式表裡。
- 在你實際的介面裡,用真實的動畫屬性、距離與持續時間,測試貼上去的這段宣告,並在上線前確認焦點、指標與減少動態效果的行為。
關鍵字預設值與其標準化座標
五個 CSS 緩動關鍵字,對應到 W3C CSS Easing Functions Level 1 所定義的標準化 cubic-bezier 數值。選擇一個關鍵字,並不會直接輸出這個關鍵字本身;這個產生器一律會顯示全部四個數字,讓這段宣告能夠被記錄、比較與修改,不藏任何預設值。下面的表格,列出每個關鍵字連同它標準化的控制座標,這個工具是把它們當成可執行的參考資料載入,而不是靠記憶去接受它們。
| 關鍵字 | x1 | y1 | x2 | y2 |
|---|---|---|---|---|
| linear | 0 | 0 | 1 | 1 |
| ease | 0.25 | 0.1 | 0.25 | 1 |
| ease-in | 0.42 | 0 | 1 | 1 |
| ease-out | 0 | 0 | 0.58 | 1 |
| ease-in-out | 0.42 | 0 | 0.58 | 1 |
一旦載入任何一個預設值,x 與 y 的輸入欄位就會變成可編輯,讓你可以從一條已知良好的曲線出發去調整,而不必從零開始猜四個數字。
正確讀懂五點取樣進度表
這五個輸入進度點,在整個動畫過程中是平均分布的,但它們產生出來的輸出進度值,幾乎從來都不是平均的。這個落差,正是 cubic-bezier() 存在的全部理由,也是取樣表在三種驗證呈現方式裡最有用的全部理由。一列輸入為 0.25、輸出為 0.05 的資料,告訴你的是:過了四分之一的持續時間之後,動畫數值只走完了它距離的百分之五;一列輸入為 0.75、輸出為 0.95 的資料,則告訴你這個元素早在持續時間結束之前,基本上就已經到達終點了。
當控制點讓曲線變得陡峭時,輸入與輸出進度值的落差,會大到光靠肉眼讀圖會誤導你。這張表格靠的是求解器,而不是視覺估計,避開了這個陷阱。表格裡的數字,只有在序列化的時候才會四捨五入到小數點後三位,計算過程則保留完整的 JavaScript 精確度,所以你看到的數值,是一個誠實的摘要,而不是對更精確內部狀態做的四捨五入近似值。
在預覽裡比較正向與反向動作
Run 預覽是三種驗證呈現方式中,唯一使用了時間的一種,而時間正是動畫真正要處理的東西。點擊 Run,會用一個 900 毫秒的 transform 過渡,以及目前顯示在輸出欄位裡的精確緩動字串,讓一個圓形在兩個水平位置之間切換;再點一次,則會在同一條曲線下反轉方向。因為同一個緩動效果會套用在兩個方向上,這個預覽能讓你確認:這條曲線對你的口味來說夠不夠對稱、進場的緩動感覺自不自然,以及出場的緩動感覺自不自然。
對於有超出效果的曲線來說,預覽也是你確認移動元素是否真的離開了它的邊界區域的地方,因為圖表框架可能沒辦法延伸到足夠遠,來顯示完整的幅度。如果超出效果很重要,移動的元素與數字取樣,才是真正可信的依據,而不是那個可視方框。這個預覽示範的是時序,而不是在每一種工作負載下的正式效能;當距離、持續時間、屬性、渲染成本、輸入裝置,或周圍動作改變時,一個真實的元件感覺可能會不一樣,所以這個預覽是一個合理性檢查,不能取代在實際情境中的測試。
在最終介面裡測試這段宣告
一條在產生器裡看起來正確的曲線,在它實際運行的元件裡,仍然可能感覺不對。這個產生器刻意只輸出 transition-timing-function 的值,連同結尾的分號,把動畫屬性、持續時間、延遲、重複次數,以及任何減少動態效果的替代方案,留給你自己選擇。一條有效的曲線,並不會自動具備無障礙性、良好效能,或恰當性,而過大的超出效果,可能會讓控制項看起來像是反向移動、離開它的容器,或顯示出原本應該保持裁切的內容。
把複製出來的宣告,套用到你原本想要的那個精確屬性、距離與持續時間上,然後在元素過渡的過程中,走過一遍焦點與指標行為,並確認重要的狀態變化,在沒有動態效果的情況下依然容易理解。在動畫不是必要的地方,請尊重使用者的減少動態效果偏好設定,並提供一個比較安靜的替代方案。想深入了解 cubic-bezier() 語法及其以瀏覽器為導向的範例,MDN 有獨立於規範之外、記載 cubic-bezier 行為的文件,而 W3C CSS Easing Functions Level 1 規範,仍然是關鍵字對應與 x 座標有效性規則的權威參考來源。