加/減速基本概念

瞭解如何柔化動畫並為動畫設定權重。

Paul Lewis

本質上沒有任何東西能線性移動。實際上,事物的移動速度往往會加快或減慢。我們的大腦會接線來預期這類動作,因此製作動畫時,請善用這個優勢。自然動態效果會讓使用者更熟悉應用程式,進而提升整體使用體驗。

摘要

  • 加/減速可讓動畫更自然。
  • 選擇 UI 元素的補償動畫。
  • 除非能讓動畫保持簡短,否則請避免使用簡單或太過簡單的動畫,以免使用者覺得緩慢。

在經典動畫中,動作慢慢開始轉速且加速,代表「慢慢轉場」;對於快速開始和減速的動作,則代表「慢慢」。最常用來搜尋這些類神經網路的術語是「緩解」和「緩解」。有時兩者會合而為一,這稱為「緩出工作」。緩緩的轉變正是讓動畫較不嚴重或發音的過程。

加/減速關鍵字

CSS 轉場效果和動畫都能讓您選擇動畫的加/減速類型。您可以使用會影響動畫的加/減速 (有時稱為 timing) 的關鍵字。此外,您也可以完全自訂調整設定,進一步自由呈現應用程式的獨特性。

以下是可在 CSS 中使用的關鍵字:

  • linear
  • ease-in
  • ease-out
  • ease-in-out

資料來源:CSS 轉換、W3C

您也可以使用 steps 關鍵字,建立具有離散步驟的轉場效果,但上方列出的關鍵字最適合用來製作自然的動畫。

線性動畫

線性減速動畫曲線。

不含加/減速的動畫稱為「線性」。線性轉場圖如下所示:

數值會隨時間變化,在相同次數上增加。從線性運動的角度來看,這類內容通常會有機器人和不自然的感覺,因此使用者會覺得這很不自然。一般而言,請避免線性運動。

無論您是使用 CSS 或 JavaScript 編寫動畫程式碼,動畫一律會有線性動作選項。

查看線性動畫

為了達成上述的 CSS 效果,程式碼看起來會像這樣:

transition: transform 500ms linear;

減速動畫

減速動畫曲線。

淡出效果會讓動畫的開始速度比線性動畫更快,而且結束時也會減速。

淡出效果通常最適合使用者介面的運作方式,因為快速開始能讓動畫感受到反應靈敏,且在結尾處仍能維持自然的減速。

查看縮小動畫效果

有許多方法可以達到簡化效果,但在 CSS 中,ease-out 關鍵字就是最簡單的方式:

transition: transform 500ms ease-out;

加速動畫

加速動畫曲線。

加速動畫開始時緩慢且結束,這與減速動畫相反。

這種動畫就像石材掉落的巨石,一開始速度不停,並用可愛的震撼力迅速擊球。

然而,從互動的觀點來看,安慰劑可能會因為突然開始而感到不尋常,而在現實生活中移動的事物通常會減速,而非只是突然停止。此外,加/減速也會在啟動時覺得遲鈍,進而對網站或應用程式回應的觀感造成負面影響。

觀看減速動畫

如要使用減速動畫,效果與減緩和線性動畫類似,可以使用其關鍵字:

transition: transform 500ms ease-in;

先進掃除動畫

減速動畫曲線。

無論是上下跑動,還是放進車子,只要做出加速和減速,就能得到更戲劇化的效果,效果比單純的鬆緊要來得更出色。

請勿使用過長的動畫時間長度,以免因為動畫開始時不穩定。通常適合 300-500 毫秒,但確切數字主要取決於專案感受。不過,由於啟動時間緩慢、中段及緩慢,動畫的對比度會提高,對使用者來說相當令人滿意。

查看先快門動畫

如要取得顯示前導動畫,可以使用 ease-in-out CSS 關鍵字:

transition: transform 500ms ease-in-out;