Easing Editor

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

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

這是什麼

Easing Editor 是 Anime.js 提供的互動頁面，可調整彈簧緩動並觀看運動效果。

為何推薦

直接預覽比只看數字曲線更容易判斷節奏，匯出功能也讓結果能接近實作。

適合誰

需要一起調整動態的介面設計師與前端開發者。

常用情境

  • 在寫程式前試出彈簧反應
  • 設計檢討時比較動態感受
  • 將視覺調整轉成 CSS 或 JavaScript

Color.review

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

  • color
  • contrast
  • accessibility

Easing Functions

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

  • animation
  • reference
  • easing

Easing Gradients

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

  • gradient
  • css
  • color