BlogChain｜10 靈動之舌

這週在課程中提到「緩動函數」（Easing function），我才知道原來一直以來在 AE 裡用得很開心的曲線是有名字的，實在太神奇啦！！

深入去搜尋後發現緩動函數不只在動畫中常見，在前端設計的領域中也是重要元素之一，Figma prototype 中也有不少 Curve 可供模擬，過去每個效果都要點點看才知道它實際效果如何，現在了解他背後代表的函數之後對動畫效果更好想像了。

以下分享幾個在前端設計中常見的幾種緩動函數應用，大家在閱讀文章時也可以順便操作電腦嘗試觀察這些動畫！（matters 不讓我直接貼影片qq）

1. 頁面捲動

人類對於線性速度變化不敏感、也不符合日常生活經驗，因此為了讓頁面捲動對使用者來說更平滑，上下滑動往往使用 easeOutCubic 或 easeInOutQuad，讓滑動時的速度漸弱，仿造現實生活中摩擦力存在的情景，使大腦可以提前預測落點，有效減少暈眩與認知負擔。

2. 彈出式視窗

視窗如果在沒有動畫的效果下直接出現可能導致使用者被嚇到、甚至對介面產生不信任或反感。而使用 easeOutBack 作為緩衝，並使其向物理效果一樣微微回彈可以有效以上負面回饋，讓它更符合真實生活體驗。Btw 我覺得第一個想到彈出式視窗要用 easeOutBack 效果的人超天才，透過微微縮放讓視窗真的有彈出的效果實在太棒了！

3. Loading bar

我相信身為 DCT 的學生應該都理解 loading bar 本身的設計只是在於改善使用者體驗（詳情請見宜秀老師的課程！大推），但其中它的動畫並非線性，而是 easeInOutQuad，原因在於先快後慢的速度變化能讓使用者降低初期等待的焦慮感，後面穩定的速度則更能強化信任。

4. Hover 動畫

在滑鼠移動到物件上時，往往會稍微延遲 0.幾秒才出現反應，這是因為使用了 easeOut 系列的函數，有了這個動畫效果，可以讓使用者認為系統有即時給予回饋，但同時不過度生硬。

看完以上緩動函數的應用後，我覺得這些函數的意義不只是動畫效果，它們更像是人機互動間的潤滑劑，讓使用者認為電腦上的介面更自然、符合預期，並在不增加認知負擔的情況下讓介面更可靠，也就是說，重點不在動畫挑選的多麽炫目，而在於如何才能讓使用者感覺剛剛好。