任務路徑 / 從輸入到結果
如何設計 cubic-bezier 緩動曲線
- 01
放置第一個控制點
把「控制點 X1」設在 0 到 1 之間，把「控制點 Y1」設在 −1 到 2 之間。曲線圖會即時重繪，並畫出一條從起點到你手柄的參考線。
- 02
放置第二個控制點
設定「控制點 X2」（0–1）和「控制點 Y2」（−1 到 2）。把 Y 值拉過 1，正是讓緩動產生回彈感的過衝來源。
- 03
設定時長
把「時長」選在 0.1 到 4 秒之間。運動軌道上的標記會按你這條精確的曲線循環演示——你看到的節奏，就是上線後的節奏。
- 04
或從已知曲線開始
預設曲線——0.25, 0.1, 0.25, 1——正是標準的 ease 關鍵字，是中性的起點。按「載入範例」得到一條帶回彈的過衝曲線（0.34, 1.56, 0.64, 1），直觀展示 Y 值超過 1 的效果。
- 05
複製計時 CSS
「複製 CSS」或「下載 .css」會儲存 toolars-cubic-bezier.css。.motion 規則設定 transition-duration，並把曲線賦給 transition-timing-function 和 animation-timing-function；它不設定 animation-duration，關鍵影格動畫需另外指定時長。
- 06
發布前先讀圖表
圖表在固定的起點和終點之間繪製進度隨時間的變化：平緩段慢，陡峭段快。曲線跌破起點或越過終點不是錯誤——那是預備動作和過衝，被如實地畫了出來。