緩動曲線除錯器

📖 工具介紹

緩動曲線除錯器是一款協助前端開發者與動效設計師視覺化除錯 cubic-bezier 緩動函數的免費線上工具。CSS 動畫裡的 animation-timing-function 決定了元素隨時間加速或減速的節奏，傳統上只能靠猜測四個數字的座標來微調，非常不直觀。本工具把這四個參數變成畫布上可以直接拖曳的兩個手柄：P0 固定在左下角 (0,0)，P3 固定在右上角 (1,1)，你只要用滑鼠或手指拖動藍色與綠色兩個控制點，曲線就會用三次貝茲參數方程式即時重繪，並同步顯示目前的 cubic-bezier 程式碼。下方還有一個小球，它會嚴格依照你畫出的緩動曲線從左滾到右，讓你直觀感受這條曲線作用在真實動畫上的節奏。工具內建 ease、linear、ease-in、ease-out、ease-in-out 與 back 回彈六種常用預設，點擊即可套用。所有曲線繪製與緩動反解都在瀏覽器本機完成，支援觸控拖曳，介面提供簡中、繁中與英文三語。

✨ 功能特點

• 畫布拖曳手柄：直接拖動 P1 與 P2，曲線隨手指即時重繪，所見即所得
• 參數方程式取樣：用三次貝茲公式逐點取樣繪製軌跡，數學上完全準確
• 真實緩動預覽：小球依時間反解曲線 y 值滾動，還原真實動畫節奏
• 六種常用預設：ease、linear、ease-in、ease-out、ease-in-out、back 一鍵套用
• 過衝支援：y 軸允許超出 0~1，可做出回彈與彈性入場效果
• 程式碼一鍵複製：自動產生兩位小數的 cubic-bezier 程式碼，可直接貼上使用

📝 使用方式

1. 用滑鼠或手指拖動藍色手柄 P1 與綠色手柄 P2，調整曲線形狀
2. 觀察下方小球的滾動節奏，判斷這條緩動是否符合預期
3. 需要經典節奏時，點擊右側預設按鈕快速套用對應曲線
4. 檢視程式碼欄位中的 cubic-bezier 數值，確認無誤後點擊複製程式碼
5. 把複製的程式碼貼到專案的 animation-timing-function 中即可使用

⚠️ 注意事項

• x 軸範圍：控制點 x 被限制在 0 到 1 之間，確保時間隨曲線單調推進
• y 軸範圍：y 允許在 -0.5 到 1.5 之間，超出即產生過衝回彈效果
• 緩動反解：小球預覽用二分法求解參數 t，與瀏覽器真實緩動一致
• 觸控相容：畫布支援 Pointer 事件，手機與平板同樣可以拖曳除錯
• 本機執行：繪製與反解全部在瀏覽器完成，不產生任何網路要求