記錄你用來產生 CSS cubic-bezier 的步驟,代表著依照固定順序記錄你輸入的四個控制座標 (x1, y1, x2, y2)、你所使用的關鍵字預設值、曲線所產生的時間取樣,以及你所複製的完整 cubic-bezier() 宣告。一份可重現的紀錄能讓你在數個月後重新建立曲線、並排比較兩條曲線、把工作交接給另一位開發者,以及依據 W3C CSS Easing Functions Level 1 規範來稽核曲線。因為 CSS Cubic Bezier 產生器會公開每一個控制點——即使選擇的是命名預設值——並以完整精度渲染所產生的 transition-timing-function 宣告,該工具其實已經產出你所需歸檔的大部分成品。你需要做的文件化工作,就是擷取該成品、其背後的決策,以及能證明曲線如你所預期般運作的取樣。
在 Cubic Bezier 工作流程中,「記錄步驟」代表什麼
cubic-bezier 緩動是由四個數字定義的,但人類得到這四個數字的過程通常涉及一連串決策:從某個命名預設值出發、在圖表上拖曳控制點、目測預覽結果,並反覆調整直到動態看起來正確。這些決策都不會保留在最終的宣告中——最後留下的只有那四個數字。文件化就是把最終的宣告與背後思考連結起來的橋樑。當曲線被重複用於其他元件、移植到新框架,或在設計系統稽核中受到檢視時,這份文件能回答三個光靠 CSS 無法回答的問題:哪個預設值是起點、哪些數字被修改過、為何修改,以及產生的曲線實際上是如何隨時間推進的。
一個有用的文件化習慣,會把每個 cubic-bezier 數值當作一份小食譜來看待:食材(那四個數字)、作法(挑選它們的步驟)、以及成果(預覽與取樣)。同時保存這三項,才能讓曲線從「神奇莫測」變得「可被稽核」。
每個步驟該擷取什麼
有三項資訊應按此順序寫入你的紀錄:
- 起點。記錄是哪一個 CSS 緩動關鍵字(linear、ease、ease-in、ease-out、ease-in-out)被用來作為曲線的種子,或者工作是否從空白畫布開始。記錄起點能說明曲線為何會落在圖表上的那個位置。
- 最終的控制座標。x1、y1、x2、y2,完全照產生器序列化的形式。這個工具只有在序列化時才會四捨五入,所以保存顯示出來的數值,可避免日後在樣式表中手動編輯時產生誤差。
- 輸出的宣告。完整的 transition-timing-function: cubic-bezier(x1, y1, x2, y2); 這一行,逐字複製,包含結尾的分號。
有兩項選擇性的補充能強化這份紀錄:在輸入 0、0.25、0.5、0.75 與 1 時的取樣表,顯示在經過四分之一、四分之二、四分之三與全部時間時,動畫值已推進到多少進度;以及一則簡短註記,說明在 Run 預覽期間所使用的屬性、距離與持續時間。動態在 opacity、transform 與 width 上的表現各不相同,所以記錄下你測試時所用的屬性,可以避免未來的讀者誤以為該曲線在任何地方感覺都一樣。
使用 CSS Cubic Bezier 產生器來記錄步驟
這個產生器把「記錄」這個動作變成一個複製貼上的工作流程。要產出完整的紀錄:
- 開啟 CSS Cubic Bezier 產生器,挑選一個起點預設值(ease、ease-in、ease-out、ease-in-out 或 linear),或從一條空白曲線開始。在你的紀錄中註明預設值名稱,讓這四個數字的來源可以被還原。
- 以小數輸入 x1、y1、x2 與 y2。介面會把 x 輸入限制在封閉的 0 到 1 範圍內,因為 CSS 會拒絕 x 控制座標落在範圍外的曲線;y 輸入則接受 −10 到 10 之間任何有限值,讓你可以記錄 anticipation 或 overshoot 而不致於失去曲線。請儲存產生器所序列化的精確數字。
- 讀取取樣表。產生器會在 x = 0、0.25、0.5、0.75 與 1 時,使用有界的牛頓迭代法求解曲線參數,必要時再以二分法收尾,接著計算 y。記錄這五個取樣能證明曲線的推進方式如你所預期——而不僅僅是它從 (0, 0) 開始、在 (1, 1) 結束。
- 點擊 Run 預覽,讓一個圓形在 900 毫秒的 transform 轉場中於兩個位置之間切換。觀察正向與反向的動態。在你的紀錄中加註:在你實際打算使用的屬性與距離下,曲線看起來是否正確,因為預覽展示的是時間配置,而非在每種工作量下的實際執行效能。
- 點擊 Copy CSS。產生器會把完整的 transition-timing-function: cubic-bezier(x1, y1, x2, y2); 宣告寫入剪貼簿,包含分號。請把該字串逐字貼入你的文件中。如果瀏覽器封鎖剪貼簿存取,該宣告在介面中仍然可以選取,手動複製仍然可行——但工具不會聲稱複製成功。
這份五步紀錄,就是你要連同樣式表一起歸檔的成品。由於所有處理都在本機進行——沒有任何曲線、CSS 或互動資料會被上傳或儲存——這份成品只會存在於你放置它的位置。
可重複使用的文件化範本
一個每次都使用的小範本,能讓文件本身保持一致。一個可用的範本包含六個欄位:
| 欄位 | 應填寫內容 |
|---|---|
| 日期與作者 | 曲線是何時、由誰產生的 |
| 起點預設值 | Linear、ease、ease-in、ease-out、ease-in-out,或空白 |
| 最終的 x1、y1、x2、y2 | 精確的四個數字,取到小數三位 |
| 在 0.5 的取樣 | 當 x = 0.5 時,求解器回傳的 y 值 |
| 最終宣告 | 完整的 transition-timing-function 行,包含分號 |
| 測試的屬性、距離、持續時間 | 預時使用的 CSS 屬性、像素距離與持續時間 |
每次都填滿這六個欄位,代表任何未來的讀者都能重建曲線、執行相同的預覽,並把結果與原始 0.5 處的取樣進行比較,而無須單獨從四個數字重新推導。擷取 0.5 處的取樣——而非僅在起點與終點取樣——能回答在 Check the Result After You Generate a CSS Cubic Bezier 中涵蓋的同一個問題:當輸入進度達到總時長的一半時,曲線實際上是怎麼運作的。
值得保存的五個標準關鍵字對應
W3C CSS Easing Functions Level 1 規範定義了每個 CSS 緩動關鍵字背後的 cubic-bezier 控制點。在你的文件系統中儲存這張表一次,就再也不必重新查找:
| 關鍵字 | Cubic-bezier 控制點 |
|---|---|
| linear | cubic-bezier(0, 0, 1, 1) |
| 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 宣告為黑盒子:
- 只記錄關鍵字名稱而未記錄四個數字。關鍵字是對曲線的間接描述;四個數字才是對曲線的直接描述。產生器之所以總是公開那四個數字——即使在選取了關鍵字之後——正是為了避免一開始就出現這個漏洞。
- 略過取樣表。控制點圖顯示的是曲線的形狀,但無法顯示在例如已耗時間一半時,動畫值已推進了多少進度。產生器透過牛頓法加上二分法來回答這個問題,並把答案印出來;把它們保留下來,才能擷取到曲線的行為,而不僅僅是它的幾何形狀。
- 忘了記錄預覽時使用的屬性、距離與持續時間。一條在 900 毫秒內對 transform: translateX(120px) 感覺平順的曲線,在 200 毫秒內作用於 width 時可能會顯得卡頓。記錄預覽設定,能把這項資訊留在文件中,而不是留在設計師的腦海裡。
- 漏掉結尾的分號。一份完整的宣告包含分號;而一個預備用於簡寫宣告的字串則不需要。記錄下確切複製的內容,可以避免之後把宣告貼進 CSS 規則時發生靜默失敗。
與你的文件一同歸檔的外部參考資料
有兩份具權威性的來源能為每份已記錄的曲線提供錨點。W3C CSS Easing Functions Level 1 規範定義了語法、x 座標的封閉 0 到 1 規則,以及關鍵字的對應表。MDN 上 cubic-bezier() 的頁面則記錄了面向瀏覽器的範例,以及每個控制點的實際效果。把這兩個 URL 與已記錄的曲線一起儲存,讓未來的稽核者能在不離開文件資料夾的情況下,交叉比對四個數字、關鍵字對應,以及任何在地慣例與標準之間的差異。
如果你正在權衡各種選項,Keep Records When You Generate a CSS Toggle Switch 對此有詳細說明。