Easing Functions

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

前往 Easing Functions 官方網站

簡介

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

為何收錄

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

適合的工作

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

可以怎麼用

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

Easing Editor

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

  • animation
  • easing
  • css

網頁工具

cubic-bezier.com

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

  • css
  • easing
  • animation

動態

Easing Wizard

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

  • easing
  • css
  • animation

動態