選擇合適的加/減速

為專案選擇適當的加/減速設定,包括加/減速、及/或加/減速。甚至使用跳出來增添更多樂趣!

Paul Lewis

瞭解了各種動畫的加/減速選項後,應該在專案中使用哪種類型的動畫?您的動畫應該包含哪種時間長度?

摘要

  • 在 UI 元素中使用減緩動畫;沉澱思緒是非常快、簡單且容易使用的功能。
  • 請務必使用動畫時間長度,開始減速和加/減速應為 200 毫秒至 500 毫秒,反彈和彈性鬆動應延長 800 至 1200 毫秒。
二次減速動畫曲線。

一般來說,緩和是正確的預設通話方式。一開始可能會引發動畫的反應速度。這是最理想的做法,但最終會有個緩慢的減速。

在 CSS 中以 ease-out 關鍵字指定的公式外,還有一組常見的爆發方程式,範圍以「積極程度」的範圍為準。如要快速緩解效果,請考慮採用二極減緩效果。

查看沉積減緩動畫

其他加/減速方程式 (尤其是彈跳或鬆緊度) 應謹慎使用,且應於專案需求適用時才使用。有幾個方法會讓使用者體驗變幻,例如一個幻覺。假如專案不有趣,請不要讓元素在 UI 周圍彈跳。相反地,如果你要建立的網站本來不久,就使用「跳出」指標!

輕鬆嘗試各種內容,看看何者符合專案性格,然後再踏出第一步。如需加/減速類型的完整清單和示範,請參閱 easings.net

選擇適當的動畫時間長度

請注意,您在專案中加入的動畫都必須設定正確的時間長度。時間太短,動畫會顯得積極銳利;太長,會使人難以理解且造成困擾。

  • 加速:約 200 毫秒-500 毫秒。這樣使用者有機會觀看動畫,但看起來不會造成任何干擾。
  • 加速:約 200 毫秒至 500 毫秒。請記住,實驗結束時可以看出效果,而且任何時間點的變動都不會降低這類影響。
  • 跳出或彈性影響:約 800 毫秒至 1200 毫秒。您需要預留彈性或彈跳效果,才能「緩解」。如果沒有額外時間,動畫的彈性彈跳部分會不會對眼睛造成激烈且不愉快的彈跳。

當然,這些只是指南,嘗試自己的輕鬆程度,選擇適合自己的專案。