瞭解如何柔化動畫並為動畫設定權重。
本質上沒有任何東西能線性移動。實際上,事物的移動速度往往會加快或減慢。我們的大腦會接線來預期這類動作,因此製作動畫時,請善用這個優勢。自然動態效果會讓使用者更熟悉應用程式,進而提升整體使用體驗。
摘要
- 加/減速可讓動畫更自然。
- 選擇 UI 元素的補償動畫。
- 除非能讓動畫保持簡短,否則請避免使用簡單或太過簡單的動畫,以免使用者覺得緩慢。
在經典動畫中,動作慢慢開始轉速且加速,代表「慢慢轉場」;對於快速開始和減速的動作,則代表「慢慢」。最常用來搜尋這些類神經網路的術語是「緩解」和「緩解」。有時兩者會合而為一,這稱為「緩出工作」。緩緩的轉變正是讓動畫較不嚴重或發音的過程。
加/減速關鍵字
CSS 轉場效果和動畫都能讓您選擇動畫的加/減速類型。您可以使用會影響動畫的加/減速 (有時稱為 timing
) 的關鍵字。此外,您也可以完全自訂調整設定,進一步自由呈現應用程式的獨特性。
以下是可在 CSS 中使用的關鍵字:
linear
ease-in
ease-out
ease-in-out
資料來源:CSS 轉換、W3C
您也可以使用 steps
關鍵字,建立具有離散步驟的轉場效果,但上方列出的關鍵字最適合用來製作自然的動畫。
線性動畫
![線性減速動畫曲線。](https://web.dev/static/articles/the-basics-of-easing/image/linear-ease-animation-cur-95032dc9fda11.png?authuser=7&hl=zh-tw)
不含加/減速的動畫稱為「線性」。線性轉場圖如下所示:
數值會隨時間變化,在相同次數上增加。從線性運動的角度來看,這類內容通常會有機器人和不自然的感覺,因此使用者會覺得這很不自然。一般而言,請避免線性運動。
無論您是使用 CSS 或 JavaScript 編寫動畫程式碼,動畫一律會有線性動作選項。
為了達成上述的 CSS 效果,程式碼看起來會像這樣:
transition: transform 500ms linear;
減速動畫
![減速動畫曲線。](https://web.dev/static/articles/the-basics-of-easing/image/ease-animation-curve-c6df0f5e61c7a.png?authuser=7&hl=zh-tw)
淡出效果會讓動畫的開始速度比線性動畫更快,而且結束時也會減速。
淡出效果通常最適合使用者介面的運作方式,因為快速開始能讓動畫感受到反應靈敏,且在結尾處仍能維持自然的減速。
有許多方法可以達到簡化效果,但在 CSS 中,ease-out
關鍵字就是最簡單的方式:
transition: transform 500ms ease-out;
加速動畫
![加速動畫曲線。](https://web.dev/static/articles/the-basics-of-easing/image/ease-animation-curve-c1ff704eed959.png?authuser=7&hl=zh-tw)
加速動畫開始時緩慢且結束,這與減速動畫相反。
這種動畫就像石材掉落的巨石,一開始速度不停,並用可愛的震撼力迅速擊球。
然而,從互動的觀點來看,安慰劑可能會因為突然開始而感到不尋常,而在現實生活中移動的事物通常會減速,而非只是突然停止。此外,加/減速也會在啟動時覺得遲鈍,進而對網站或應用程式回應的觀感造成負面影響。
如要使用減速動畫,效果與減緩和線性動畫類似,可以使用其關鍵字:
transition: transform 500ms ease-in;
先進掃除動畫
![減速動畫曲線。](https://web.dev/static/articles/the-basics-of-easing/image/ease-out-animation-curve-ed508ac2b4378.png?authuser=7&hl=zh-tw)
無論是上下跑動,還是放進車子,只要做出加速和減速,就能得到更戲劇化的效果,效果比單純的鬆緊要來得更出色。
請勿使用過長的動畫時間長度,以免因為動畫開始時不穩定。通常適合 300-500 毫秒,但確切數字主要取決於專案感受。不過,由於啟動時間緩慢、中段及緩慢,動畫的對比度會提高,對使用者來說相當令人滿意。
如要取得顯示前導動畫,可以使用 ease-in-out
CSS 關鍵字:
transition: transform 500ms ease-in-out;