速度曲線和彈簧動畫怎麼選？
一句話做出判斷
速度曲線會照設定好的節奏移動。彈簧動畫像真的彈簧，會自己慢慢停下來。
淡入淡出、顏色改變和固定步驟，用速度曲線。物件移動或跟著拖曳時，用彈簧動畫。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Easing
↗ 緩動曲線
緩動曲線決定動畫從開始到結束的速度變化，例如先慢後快，或先快後慢。
cubic-bezier()面板會快速進場，再柔和停下；離場時間較短，動作也更直接。
- 什麼時候用
- 希望速度能表現重量、方向或操作意圖時，可調整緩動曲線。
- 什麼時候不要用
- 不要讓每個互動都套上同一個誇張的彈跳曲線。
- 程式裡的名稱
cubic-bezier()
Spring Animation
↗ 彈簧動畫
彈簧動畫採用物理模型，由剛性、阻尼、質量和初始速度控制動作。
stiffness / damping / mass拖曳的卡片回到位置時會稍微超過目標，再自然停穩。
- 什麼時候用
- 動態由手勢帶動、可以中斷，而且需要保留操作速度時，可使用彈簧動畫。
- 什麼時候不要用
- 日常控制項或敏感流程不要加入過度彈跳。
- 程式裡的名稱
stiffness / damping / mass
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 緩動曲線Easing | 希望速度能表現重量、方向或操作意圖時，可調整緩動曲線。 | 不要讓每個互動都套上同一個誇張的彈跳曲線。 | cubic-bezier() |
| 彈簧動畫Spring Animation | 動態由手勢帶動、可以中斷，而且需要保留操作速度時，可使用彈簧動畫。 | 日常控制項或敏感流程不要加入過度彈跳。 | stiffness / damping / mass |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 緩動曲線（Easing）、彈簧動畫（Spring Animation） 中，為真實使用流程選出最合適的介面模式。判斷規則：速度曲線會照設定好的節奏移動。彈簧動畫像真的彈簧，會自己慢慢停下來。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。