[譯] 動畫中緩動（easing）的基礎知識

原文地址：https://developers.google.com/web/fundamentals/look-and-feel/animation...

天然界中沒有東西是從一個點線性地移動到另外一點。 在現實中，事物在運動時可能加速或減速。 咱們的大腦習慣於期待這種運動，所以在作動畫時，應利用此規律。 天然的運動會讓用戶對你的應用感受更舒服，從而產生更好的體驗效果。

Tip:

• 緩動會讓你的動畫看起來更加天然
• 爲UI元素選擇緩出（ease-out）動畫
• 避免緩入（ease-in）或者緩入緩出（ease-in-out）動畫，除非你能讓其保持簡短；這種動畫會讓用戶以爲反應遲鈍

在經典的動畫中，緩慢開始而後加速稱爲「慢入」(slow in)，開始很快而後減速稱爲「慢出」（slow out），然而網上最多見的叫法是「緩入」（ease in）和「緩出」（ease out）。有時候二者結合叫作「緩入緩出」（ease in out）。緩動可使動畫再也不那麼生硬。

緩動的關鍵字

CSS transition和animation都可以讓你去選擇一種緩動類型來用於動畫中。你可使用影響動畫緩動的關鍵字。你能夠徹底自定義你的緩動效果，這使得你可以更加自由的改善本身的應用。

下面是你能在CSS裏用到的一些關鍵字：

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

你也可使用steps關鍵字，它能讓你建立具備步驟的變換，但上面列出的關鍵字都是最有用的，可以創造出天然的動畫效果，這就是你所須要的。

線性動畫

沒有任何緩動效果的動畫就是線性動畫，線性變換的圖以下：

隨時間增加，值會等量增加。線性運動的物體看起來很像機器人不天然，這也是用戶會以爲不天然的效果。總之你須要避免使用線性運動。

無論你用CSS仍是JS來實現動畫，你會發現總會有一個選項是linear的。若是用CSS來實現上述效果，代碼以下：

transition: transform 500ms linear;

緩出（ease-out）動畫

緩出致使動畫開始時比線性運動要快，而後在快結束時減速

有不少種方法來實現緩出效果，最簡單的就是CSS裏的ease-out關鍵字了：

transition: transform 500ms ease-out;

緩出效果很是適合用戶界面，由於在開始快速回讓動畫有反應快的感受，結束時有天然的減速。

緩入（ease-in）動畫

與緩出相反，緩入開始慢，結束快。

這種動畫像很重的石頭掉下來同樣，開始很慢，而後快速撞擊地面並迅速沉寂。

與緩出和線性動畫相似，要想使用緩入動畫，能夠直接使用關鍵字：

transition: transform 500ms ease-in;

然而從交互的角度看，緩入會讓人以爲有些不尋常，由於它在結尾很忽然的沉寂。真實世界裏的事物經常是減速，而不是忽然中止。緩入還會讓人感受行動遲緩，讓人對網站的響應速度產生很差的影響。

緩入緩出（ease-in-out）動畫

緩入緩出與汽車的加速減速相似，使用恰當的時候，會比單獨使用緩出有更好的效果。

須要注意的是，由於開始緩入會讓動畫有遲鈍的感受，因此緩入的時間不要太長，通常在300~500ms較爲合適，其實很大程度上會根據項目來選擇合適的數字。緩入緩出因爲開始慢，中間加速，結束慢，因此會使得整個動畫有很是強烈的對比，用戶可能會感到比較滿意。

設置緩入緩出動畫可使用ease-in-outCSS關鍵字：

transition: transform 500ms ease-in-out;