緩動函數 (Easing function)
緩動函數 (Easing function) 用於控制物件的速度變化。它們決定物件如何從開始到結束的進行方式，比如是否線性移動，或逐漸加速、減速，甚至彈跳等效果。
讓物件的移動看起來更生動。
提升動畫的自然感：讓動畫看起來更流暢，避免機械化的線性運動。
增強視覺效果：通過不同的速度變化，創造出多樣的動畫風格。
改善用戶體驗：讓交互更生動，提升用戶對動畫的感知。
緩入 (Ease In)：物件從靜止逐漸加速 (從 0 開始加速)。
- 適合物體從靜止開始移動的動畫。
緩出 (Ease Out)：物件從高速逐漸減速直到靜止 (減速到 0)。
- 適合物體移動到目標位置後停止的動畫。
緩入緩出 (Ease InOut)：先加速後減速的平滑運動 (前半段從 0 開始加速，後半段減速到 0)。
- 適合彈跳、滑動等動畫。
線性運動 (Linear) ： 等速運動，從開始到結束的速度完全一致。
- 適合進度條。
緩動函數的圖示
線性（Linear）：一條直線。
緩入（Ease-In）：曲線從平緩到陡峭。
緩出（Ease-Out）：曲線從陡峭到平緩。
緩入緩出（Ease-In-Out）：曲線呈 S 形。
彈性（Elastic）：曲線有多次波動。
反彈（Bounce）：曲線有多次階梯狀下降。
Quad ： 二次方曲線。
- 適合簡單的加速或減速動畫，如按鈕點擊效果。
Cubic ： 三次方曲線。
- 適合需要更強烈速度變化的動畫，如頁面切換。
Quart ： 四次方曲線。
- 適合需要快速加速或減速的動畫，如彈出窗口。
Quint ： 五次方曲線。
- 適合極端的速度變化效果，如快速閃現的動畫。
Since ： 平滑的正弦波曲線。
- 適合需要柔和過渡的動畫，如淡入淡出效果。
Expo ： 指數運動，起始或結束速度變化極快，幾乎瞬間到達或停止。
- 適合需要極快速度變化的動畫，如閃電效果。
Circ ： 模擬圓形曲線運動，速度變化平滑且自然。
- 適合模擬圓形軌跡的動畫，如旋轉效果。
Bounce ： 模擬物體彈跳的效果。
- 適合模擬球體落地或彈跳的動畫，如按鈕點擊後的反饋。
Elastic ： 模擬彈簧運動的效果，帶有回彈。
- 適合模擬彈簧或彈性物體的動畫，如彈性按鈕。
Flash ： 快速來回閃動的效果。
- 適合需要快速閃動的動畫，如警告提示。
---
| Quad | |
||
| Cubic | |
||
| Quart | |
||
| Quint | |
||
| Sine | |
||
| Exponential | |
||
| Circ | |
||
| Elastic | |
||
| Back | |
||
| Bounce | |
Reference: