加/減速基本概念

瞭解如何讓動畫更柔和,並為動畫設定權重。

Paul Lewis

自然界中沒有任何事物會以線性方式從一個點移動到另一個點。在現實中,物體在移動時通常會加速或減速。我們的大腦會預期這種動作,因此在製作動畫時,您應善用這一點。自然的動作可讓使用者更自在地使用應用程式,進而帶來更優質的整體體驗。

  • 緩和效果可讓動畫看起來更自然。
  • 為 UI 元素選擇漸弱動畫。
  • 除非內容簡短,否則請避免使用簡易或簡化的動畫,因為這類動畫往往會讓使用者感覺疲乏。

在經典動畫中,緩慢開始並加速動作的詞元是「慢入」,對於迅速開始及減速的動作則稱為「減速」。網站上最常用來描述這類效果的術語分別是「ease in」和「ease out」。有時這兩種工具會合而為一,稱為「緩出」。簡單來說,就是降低動畫嚴重度或發音的過程。

緩和關鍵字

您可以使用 CSS 轉場效果和動畫,選擇要為動畫使用的加/減速類型。您可以使用會影響動畫的加/減速 (或 timing,因為有時稱為) 的關鍵字。您也可以完全自訂漸變效果,更自由地展現應用程式的個性。

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

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

資料來源:CSS 轉場效果、W3C

您也可以使用 steps 關鍵字來建立包含獨立步驟的轉場效果,但上述關鍵字最適合用來建立感覺自然的動畫。

線性動畫

線性緩和動畫曲線。

沒有任何緩和效果的動畫稱為「線性」。線性轉換的圖表如下所示:

隨著時間的推移,值也會以等量增加。使用線性運動時,一般人會感到機械性與自然不尋常,因此會讓使用者感到奇異。一般來說,請避免使用線性動作。

無論您是使用 CSS 還是 JavaScript 編寫動畫程式碼,都會發現有線性動作選項。

查看線性動畫

如要使用 CSS 達成上述效果,程式碼會像這樣:

transition: transform 500ms linear;

Ease-out 動畫

減速動畫曲線。

緩和結束會讓動畫的開始速度比線性動畫更快,且在結束時會減速。

在使用者介面工作中,通常以漸弱效果最為合適,因為快速開始可讓動畫呈現出有回應的效果,同時還能讓動畫在結尾自然減速。

查看漸弱動畫

您可以透過多種方式實現漸弱效果,但最簡單的方法是使用 CSS 中的 ease-out 關鍵字:

transition: transform 500ms ease-out;

漸進動畫

簡易動畫曲線。

以下動畫與簡易播放動畫相反,加速播放動畫開始並快速結束。

這種動畫就像重石掉落,一開始緩慢,最後快速撞地,發出沉悶的聲響。

不過,從互動角度來看,先加速後減速的效果會因為突然結束而顯得有些不自然,因為真實世界中的物體移動時,通常會先減速,而非突然停止。緩入動畫也會造成負面影響,讓使用者在開始時覺得速度很慢,進而影響他們對網站或應用程式回應速度的看法。

查看簡化式動畫

如要使用 ease-in 動畫,您可以使用其關鍵字,這與 ease-out 和線性動畫類似:

transition: transform 500ms ease-in;

退出動畫

加速跳轉動畫曲線。

緩慢進入和緩慢退出效果就像汽車的加速和減速,如果使用得當,比起單純的緩慢退出效果,還能帶來更強烈的效果。

請勿使用過於冗長的動畫時間長度,因為暫停開始就出現畫面緩慢。300 至 500 毫秒的間隔通常比較合適,但實際數字仍完全取決於專案感受。不過,由於影片開頭、中段和慢速等影格的緩慢情形發生,因此動畫的對比度增加了,因此對使用者來說非常實用。

查看淡入淡出動畫

如要取得簡化式動畫,可以使用 ease-in-out CSS 關鍵字:

transition: transform 500ms ease-in-out;