Easing Editor

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

前往 Easing Editor 官方網站

簡介

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

為何收錄

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

適合的工作

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

可以怎麼用

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

cubic-bezier.com

拖曳控制點調整緩動曲線，對照動畫預覽，再讀取 cubic-bezier() 數值用於 CSS 動態。

  • css
  • easing
  • animation

動態

Easing Wizard

調整緩動曲線的控制值，查看移動預覽，再複製對應的 CSS 函式。

  • easing
  • css
  • animation

動態

Easing Functions

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

  • animation
  • reference
  • easing

網頁工具