LocalTools離線瀏覽器工具合集

分類: 開發工具

三次貝茲曲線產生器

站方自行規劃沒找到想要的工具？

設計自訂的 CSS 緩動曲線

拖曳兩個控制點來調整 cubic-bezier() 時間函式，即時觀察曲線與動態預覽的變化，再複製完成的 animation-timing-function 宣告。曲線計算完全在你的瀏覽器中進行。

預設值

動畫進行到 50% 時的進度: 0.802

輸出
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

CSS 轉場或動畫的緩動效果，其實是一條從 (0,0) 到 (1,1) 的三次貝茲曲線：中間那兩個點決定了動態是先慢後快、有沒有回彈，還是別的形態。內建的關鍵字（如 ease、ease-in-out）只是這個空間裡五個固定的點。這個工具會依你設定的兩個控制點畫出曲線，顯示一個依這個時間函式移動的方塊，並回報動畫進行到一半時，緩動後的進度走到了哪裡——這正是光看曲線最難想像的數字。

使用方式

  1. 從預設值開始，或直接設定兩個控制點。
  2. 觀察曲線與動態預覽的變化。
  3. 把 cubic-bezier() 宣告複製進你的 transition 或 animation。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

會在伺服器上計算任何內容嗎？
不會。曲線、動態預覽與進度數字，全部都是由頁面內執行的 JavaScript 計算出來的。
為什麼兩個 X 值只能在 0 到 1 之間？
X 代表經過的時間，CSS 規格要求時間必須從 0 一路前進到 1，曲線才會是合法的時間函式。Y 是緩動後的進度，允許小於 0 或大於 1，這正是做出回彈或超出效果的方式。
動畫進行到一半那個數字代表什麼？
它是動畫時長剛好過了一半時，緩動後（而不是等速時）的進度。如果那個數字大於 50%，代表在中點時動態已經比等速的進度更快了。

回到全部工具