Easing Functions

視覺化查閱常見緩動曲線，以及它們如何隨時間改變動態。

  • 網頁工具
前往 Easing Functions 官方網站

這是什麼

Easing Functions 是常見 ease-in、ease-out、bounce、elastic 等動態曲線的視覺速查表。

為何推薦

並排觀看曲線動畫，比憑名稱記憶更快選出適合的動態節奏。

適合誰

設計或實作介面轉場與動畫的人。

常用情境

  • 為按鈕或面板轉場選擇曲線
  • 向團隊說明緩動選擇
  • 實作前查閱命名的緩動函式

Color.review

快速比較前景與背景色對比，並對照常見無障礙門檻的工具。

  • color
  • contrast
  • accessibility

Easing Editor

Anime.js 的彈簧緩動編輯器，可預覽動態並匯出 CSS 或 JavaScript 值。

  • animation
  • easing
  • css

Easing Gradients

展示緩動色彩過渡，並產生含中間色標的 CSS 漸層編輯器。

  • gradient
  • css
  • color