重點摘要
- 01拖動兩個控制點控制點以視覺方式雕刻緩動曲線，而非猜測數值。
- 02實時球動畫播放計時，讓您在提交前感受動作。
- 03所有五個CSS內置預設(ease、linear、ease-in、ease-out、ease-in-out)作為起點可用。
- 04cubic-bezier()值以兩位小數精度實時更新，準備粘貼到任何CSS屬性中。
為什麼自訂緩動曲線對UI動作很重要
CSS的內置計時函數——ease、ease-in-out、linear——涵蓋很多情況，但每個UI都有時刻預設感覺略微不對。出現過快的工具提示、打開時超過的模態、感覺機械的進度條。Cubic-bezier曲線讓您將動作調整為感覺自然而非機械，但cubic-bezier(0.4, 0, 0.2, 1)中的四個數字幾乎不可能直接推理。
Handytool的cubic-bezier編輯器將這些數字變為具有兩個可拖動控制點的視覺曲線。移動控制點，球動畫立即播放，讓您按感覺迭代直到動作符合您的意圖。然後複製值並放入您的CSS——完成。
如何設計CSS緩動曲線
- 01
從預設開始
選擇ease、linear、ease-in、ease-out或ease-in-out作為基線。控制點會自動貼附到每個預設的正確位置。
- 02
拖動控制點控制點
每個控制點控制曲線的一端——起始控制點塑造初始加速度，終止控制點塑造最終減速度。移動控制點會自動將預設切換為'自訂'。
- 03
觀看球動畫
球使用您的曲線從左到右動畫。調整持續時間滑塊以預覽慢 vs 快過渡。
- 04
使用超調進行實驗
將Y軸控制點拖到1以上或0以下以建立超調和欠調——'反彈'效果，讓菜單以能量開啟。
- 05
複製CSS值
點擊複製以獲取cubic-bezier()字符串並將其粘貼到樣式表中的transition-timing-function或animation-timing-function中。
完全在您的瀏覽器中運行
編輯器是自包含的瀏覽器工具——頁面打開後沒有字體、腳本和數據載入。拖動控制點和預覽動畫無需連接即可工作。用於預覽球的cubic-bezier公式與瀏覽器對CSS過渡使用的相同，因此您在編輯器中看到的正是您的樣式表將生成的內容。
沒有什麼可安裝也沒有什麼可註冊。輸出是單一的CSS值——粘貼並您完成。
Cubic-Bezier編輯器常見問題
什麼是cubic-bezier緩動曲線？
這是由兩個控制點定義的數學曲線，決定CSS過渡或動畫如何隨時間加速。cubic-bezier(x1, y1, x2, y2)中的四個數字設置這些控制點的位置。
為什麼Y值可以超過1或低於0？
0–1外的Y值會產生超調和欠調——曲線在回落前越過其終點。這建立'彈跳'緩動曲線。X值必須保留在0–1。
我如何使用輸出？
複製cubic-bezier(...)字符串並將其粘貼到任何CSS transition-timing-function或animation-timing-function值中。它適用於所有現代瀏覽器。
ease-in-out實際上是什麼意思？
Ease-in-out開始慢、在中間加速並在末尾減速——cubic-bezier(0.42, 0, 0.58, 1)。它反映實物加速和減速的方式，是大多數拋光UI動作的預設選擇。
球動畫預覽是否準確到CSS？
是的——預覽使用瀏覽器應用於CSS過渡的相同cubic bezier公式。持續時間滑塊讓您在提交之前感受慢 vs 快曲線。