動態設計教室 · #01

緩動曲線：同樣 0.3 秒，差別在停下來的那一下

發佈於 2026-10-18

側欄做好了、功能都對，客戶看完卻說「怪怪的，有點廉價」，又沒人說得出哪裡怪。很多時候畫面沒有問題，問題在它停下來的那一下。這一課只講一件事：緩動曲線。

先想一個生活裡的例子：停紅燈

兩台車從同一個地方出發，同樣 1.7 秒開到停止線。A 一路等速，到線前才急停，整台車往前一頓；B 越接近停止線，煞車踩得越多，停得很穩。兩台車走的距離和時間完全一樣，差別只在「每一刻走多快」。UI 動畫也一樣。

實驗：同一個側欄，只改曲線

我們拿 Excalidraw 的 Library 側欄來做實驗：同一個畫面、同一段距離、同樣 0.30 秒，做兩個版本。

• A｜等速（linear）：每一格都走 16 px。起步和停下都是瞬間發生，看起來像機器。
• B｜緩動（ease-out）：第 1 格就走 91 px，越接近終點走得越少，最後一格是 0 px。日本動畫把這個叫「詰め（ツメ）」：越接近終點，中間格排得越密。

曲線怎麼看：斜率就是速度

把時間放在橫軸、進度放在縱軸，等速是一條斜直線，每一段的斜率都一樣。ease-out 一開始很陡（走得快），越到右邊越平（慢下來），所以眼睛最後看到的是「穩穩落定」的那一刻。B 用的進場曲線是 cubic-bezier(.16, 1, .3, 1)。

離場反過來：先慢後快，而且更短

關掉側欄時，使用者已經決定讓它走了，注意力也已經離開。所以離場用 ease-in：先慢一點讓眼睛看到它要走，然後加速消失；時間也比進場短，B 用 cubic-bezier(.4, 0, 1, 1)、0.20 秒。東西要走了，就別讓人等。

常用原則

• 從畫面外進來的東西（側欄、對話框、提示）：用 ease-out，讓它在終點減速停住。
• 離開畫面的東西：用 ease-in，而且比進場短一些。
• 只有不需要「停下來」的動作，例如持續旋轉的載入圖示，才適合等速。

CSS 寫法

.panel {
  transform: translateX(100%);
  /* 離場：ease-in，0.20 秒 */
  transition: transform 0.20s cubic-bezier(.4, 0, 1, 1);
}
.panel.is-open {
  transform: translateX(0);
  /* 進場：ease-out，0.30 秒 */
  transition: transform 0.30s cubic-bezier(.16, 1, .3, 1);
}

寫在 .is-open 上的是打開時用的曲線，寫在 .panel 上的是關閉時用的，所以進場和離場可以各用一條。

非官方動態設計概念示範。介面取自 excalidraw.com（MIT 開源），與 Excalidraw 沒有合作關係；Excalidraw 本身打開側欄沒有滑入動畫，A、B 兩種動態都是我們做的。片中的數字（16 px、91 px、0 px、兩條曲線）都由驅動動畫的同一組函式算出。

差別，在曲線裡。B 的兩條曲線，也是 LaunchFlim 自己品牌的進場與離場曲線。