如今，我們很難通過界面動效給人留下深刻的印象或者帶來驚喜。它展示了屏幕之間的交互，解釋了如何使用該應(yīng)用程序，或者只是簡單地吸引用戶的注意。在瀏覽相關(guān)動效的文章時，我發(fā)現(xiàn)幾乎所有的文章都只描述了某些特定的例子或一般通用型的動效知識，但是我沒有見過一篇文章都可以清晰，確切全面地描述所有動效規(guī)則。正如此，在本文中，我不會加入任何新的東西，我只想在一個地方列出所有主要的動效原理和規(guī)則，這樣其他想要開始制作界面動效的設(shè)計師就不必查找額外的動效知識。
01動效的持續(xù)時間和速度
當(dāng)元素更改其狀態(tài)或位置時，動效的持續(xù)時間應(yīng)該適當(dāng)慢到用戶可以注意到，但同時應(yīng)足夠快，以免引起用戶等待。
控制好動效的持續(xù)時間。既不要太快，也不要慢地讓用戶打哈欠
眾多研究結(jié)果表明：界面動效的最佳速度在200到500毫秒之間。這個時間是基于人腦的特有機制而得出的結(jié)論。任何短于100毫秒的動效都是瞬時的，根本不會被人腦識別。而動效時間超過1秒將傳遞一種遲鈍感，因此對用戶來說會產(chǎn)生無聊厭煩感。
動效持續(xù)時間建議
在移動設(shè)備上，Material Design Guidelines還建議將動效的持續(xù)時間限制為200-300毫秒。至于平板電腦，持續(xù)時間應(yīng)延長30％，大約為400-450毫秒。原因很簡單：屏幕尺寸更大，物體在改變位置時需要經(jīng)過更長的路徑。因此，在可穿戴設(shè)備上，持續(xù)時間應(yīng)縮短30％，大約為150-200 ms，因為在較小的屏幕上，運動路徑更短。
針對不同屏幕尺寸，動效時間也需要做出調(diào)整
網(wǎng)頁動效的處理方式則有所不同。由于我們習(xí)慣于在瀏覽器中迅速打開網(wǎng)頁，因此我們希望也能在不同狀態(tài)之間快速轉(zhuǎn)換。因此，網(wǎng)頁動效的持續(xù)時間應(yīng)比移動設(shè)備短約2倍-大概在150-200毫秒之間。否則，用戶將不可避免地認為計算機死機或網(wǎng)絡(luò)連接出現(xiàn)問題。
但是，如果您要在網(wǎng)站上創(chuàng)建裝飾性動效或試圖吸引用戶對某些元素的關(guān)注，則無需考慮這些規(guī)則。在這些情況下，動效時間可以更長一些。
電腦大屏幕并不等于緩慢的動效！
您需要記住，無論在哪個顯示設(shè)備，動效的持續(xù)時間不僅僅取決于動效元素行進距離，還取決于動效元素的大小。較小的動效元素或具簡單小幅度動效應(yīng)適當(dāng)縮短持續(xù)時間（加快運動速度）。反之，具有較大且復(fù)雜元素的動效則需要加長持續(xù)時間。
在相同大小的移動物體中，第一個停下的是運動距離最短的物體。（注：作者此處指例1、例2）
小物體與大物體相比移動速度較慢，因為它們（注：此處作者指大物體）會產(chǎn)生較大的形變量/偏移量。
動效的持續(xù)時間取決于物體的大小和運動距離
當(dāng)物體碰撞時，碰撞的能量必須根據(jù)物理定律在它們之間平均分配。因此，最好避免使用彈跳效果。僅在有意義的特殊情況下使用它。
避免使用彈跳效果，因為它會分散注意力
物體的運動應(yīng)該清晰且銳利的，因此不要使用運動模糊（是的，說的就是AE用戶，這次不可以）。即使在現(xiàn)代移動設(shè)備上也很難實現(xiàn)該效果，并且運動模糊不適用于界面 。
不要在動效中使用運動模糊效果
清單列表（新聞卡片，電子郵件列表等）之間應(yīng)該有很短的延遲時間。每次出現(xiàn)新元素應(yīng)持續(xù)20到25 ms。界面元素出現(xiàn)的速度較慢可能會惹惱用戶。
表單列表的動效應(yīng)持續(xù)20–25毫秒
緩動
緩動使得物體的運動更加自然。這是在《生活的幻覺：迪斯尼動畫》書中詳盡描述一個重要的動效原則，這本書由兩個迪斯尼主動畫師-奧利·約翰斯頓和弗蘭克·托馬斯編寫。
為了使動效看起來不顯得那么生硬和機械感，動效物體應(yīng)以一定的加速度或減速度移動，就像物理現(xiàn)實世界中的所有物體一樣。
與純線性動效相比，具有緩動效果的動效看起來更自然
線性動效
不受任何物理力影響的物體將線性移動，即以恒定速度移動。正因為如此，人眼看起來會覺得非常不自然和生硬。
所有動效應(yīng)用程序都使用動效曲線。我將解釋如何閱讀它們以及它們的含義。下圖曲線顯示物體位置(y軸)一段時間（x軸）間隔內(nèi)如何變化。在下圖中，運動都是線性的，因此物體在同一時間行進相同的距離。
直線運動曲線
舉個例子，線性動效曲線可以用在物體改變顏色或者透明度的時候。大致來講，物體不改變位置時，我們可以使用線性動效曲線。
緩入或加速曲線
我們可以在曲線上看到，在開始時物體的位置變化緩慢，而速度則逐漸增加。這意味著物體正在以一定的加速度運動。
加速度曲線
當(dāng)物體以全速飛出屏幕時，應(yīng)使用此曲線。這些可以是系統(tǒng)通知，也可以只是界面卡片。但是請記住，僅當(dāng)物體永遠離開屏幕且我們無法調(diào)用或喚起它們時，才應(yīng)使用此類曲線。
將卡扔出屏幕的加速度曲線
動效曲線有助于恰當(dāng)?shù)乇磉_情緒。在下面的示例中，我們可以看到所有物體的移動持續(xù)時間和距離是相同的，但是即使曲線上的微小變化也可以影響動效情緒。
當(dāng)然，通過更改動效曲線，可以使物體更好的模擬真實物理世界。
持續(xù)時間和距離相同，但動效情緒不同
緩出或減速曲線
它與緩入曲線相反，因此物體會快速移動很長的距離，然后緩慢降低速度，直到最終停止。
減速曲線
當(dāng)元素移入屏幕時應(yīng)使用這種類型的動效曲線-它以全速在屏幕上運動，然后逐漸變慢直到完全停止。這也可以應(yīng)用于從屏幕外部卡片或者物體飛入屏幕的動效。
移入動效的減速曲線
緩進緩出或標(biāo)準(zhǔn)曲線
該曲線使物體在開始時獲得速度，然后將其緩慢降低回零。此類曲線是界面動效中最常使用的東小區(qū)現(xiàn)。當(dāng)您不知道使用哪種類型的運動時，請使用標(biāo)準(zhǔn)曲線。
標(biāo)準(zhǔn)曲線
根據(jù)Material Design Guidenlines，最好使用非對稱曲線使機芯看起來更自然和逼真。我們應(yīng)當(dāng)強調(diào)曲線的末端即后半段動效，所以減速的時間要比加速時間要長。在這種情況下，用戶將更加關(guān)注元素的后半段，從而更容易關(guān)注元素的新狀態(tài)。
標(biāo)準(zhǔn)的對稱和非對稱曲線之間的區(qū)別
當(dāng)物體從屏幕的一側(cè)移動到另一側(cè)時，應(yīng)當(dāng)使用緩入緩出功能。在這種情況下，可以避免用戶過于關(guān)注物體的運動。
卡片橫跨屏幕運動的非對稱動效曲線
當(dāng)物體從屏幕消失，用戶也可以隨時喚起消失的物體回到原先的位置時，這類運動的動效曲線（注：抽屜導(dǎo)航的收起動效）應(yīng)當(dāng)使用非對稱動效曲線。這類的動效包括抽屜導(dǎo)航動效等。
抽屜導(dǎo)航收起時的非對稱動效曲線
這些案例還可以得出一個很多初學(xué)者都容易忽略的基本原則，即起始（出現(xiàn)）動效不等于結(jié)束（消失）動效曲線。就以抽屜導(dǎo)航為例，抽屜導(dǎo)航是以減速曲線出現(xiàn)以標(biāo)準(zhǔn)曲線消失的。
此外，根據(jù)Google Material Design的說法，物體出現(xiàn)的動效時間應(yīng)更長一些，以引起更多關(guān)注。
側(cè)面菜單的出現(xiàn)和消失分別通過減速度和標(biāo)準(zhǔn)曲線實現(xiàn)
Cubic-bezier函數(shù)（注：貝塞爾函數(shù)）是用來描述運動曲線的。之所以名稱叫做Cubic，是因為它是基于四個點。
貝塞爾圖形圖形上定義了兩個坐標(biāo)點，第一個點坐標(biāo)是（0,0），第二個點坐標(biāo)是（1，1）
基于這些我們只需要描述圖形上另外兩個點，通過函數(shù)（x1,y1,x2,y2）的四個參數(shù)描述這另外兩個點，前兩個參數(shù)是第一個點的x軸y軸，后兩個是第二個點的x軸y軸。
為了便于您定義貝塞爾曲線，建議您使用easings.net和cubic-bezier.com網(wǎng)站。第一個包含最常用曲線參數(shù)，您可以將其參數(shù)復(fù)制到交互原型工具中使用。第二個網(wǎng)站可以實時預(yù)覽不同參數(shù)的運動效果。
各種貝塞爾線以及對應(yīng)的參數(shù)
動效編排
就像芭蕾中的舞蹈編排一樣，動效編排大致意思就是在動效中以流式的方向來引導(dǎo)用戶的注意力。
動效編排有兩種——平等互動和從屬互動。
平等互動
平等互動意味著物體都要按照同一特定規(guī)則出現(xiàn)。
在這種情況下，所有卡片會像是流水一樣，一個方向從上到下引導(dǎo)用戶的注意。如果我們不遵循同一特定規(guī)則，那么用戶的注意力將會分散。同時所有元素立馬就會看起來變得糟糕。
應(yīng)該用一個流式方向引導(dǎo)用戶注意力
對于表格視圖，情況會更復(fù)雜。在表格里，應(yīng)該按照對角線的方式來引導(dǎo)用戶的關(guān)注點，所以一個接一個地展示元素是一個糟糕的選擇。逐個顯示每個元素會使動效時間過長，并且用戶的關(guān)注路線會過于曲折，這是錯誤的。
卡片表格視圖動效的對角線呈現(xiàn)
從屬互動
從屬交互意味著我們有一個吸引所有用戶注意力的主體，而所有其他元素都從屬于它。這種動效使得畫面有了秩序感，并讓人們更為關(guān)注核心內(nèi)容。
如果不這么做，用戶會不知道關(guān)注哪一塊內(nèi)容，用戶的注意力會被分散。因此，如果有多個要設(shè)置動效的元素，則需要明確它們的運動順序并確定主體，并且盡量減少同一時間運動的元素。
明確動效中的主體，其他對象保持跟隨。不然用戶會不知道關(guān)注哪一塊，從而分散注意力。
根據(jù)Materal Design，當(dāng)物體不按照自身比例改變大小時，它們應(yīng)沿著弧線而不是直線移動。它有助于使運動更自然。
物體非同比形變時，應(yīng)沿弧線運動
當(dāng)物體按自身比例形變時，物體應(yīng)當(dāng)按照直線路徑運動。因為直線運動的實現(xiàn)比較簡單，因此通常會忽略物體非自身比例形變時應(yīng)該采用弧線運動的規(guī)則。反觀現(xiàn)有的實際應(yīng)用案例，直線運動確實占大多數(shù)。
同比形變時的直線路徑
曲線運動可以通過兩種方式實現(xiàn)：第一種稱為“ 垂直出”——水平開始，垂直結(jié)束；第二個（水平出）——垂直開始，水平結(jié)束。
物體曲線運動路徑必須與界面滾動的主軸線重合（注：這里可以理解為曲線運動結(jié)束時的切線，與界面滾動的方向重合）。例如，在下一張圖像上，我們可以上下垂直地滾動界面，因此卡片應(yīng)當(dāng)以“ 垂直出”的方式展開——首先移動到右側(cè)，然后向下運動。收起的運動方式則相反——即卡首先垂直上升，然后水平移動回到初始位置。
如果物體的運動路徑彼此相交，則它們將無法穿過彼此。物體應(yīng)當(dāng)加速或者減速給其他物體留下運動空間?；蛘咭部梢允褂梦矬w推動其他物體。為什么會這樣？因為我們大腦總是把這些物體看做是在同一水平面。
在運動過程中，物體不應(yīng)相互穿過，而應(yīng)給其他物體預(yù)留運動空間
在另一種情況下，運動物體可以飛越其他物體。但是再不能直接穿過物體或交匯穿過。為什么？由于我們認為界面中的元素都是遵循顯示物理規(guī)律的，因此現(xiàn)實世界中沒有任何固體物體能夠做到這些。
物體可以飛越其他物體
結(jié)論
因此，我們總結(jié)所有上述動效規(guī)則和原則，界面中的動效應(yīng)映射的是我們熟知的顯示物理世界中道的運動——摩擦，加速度等。模仿物體在現(xiàn)實中的運動行為，我們可以構(gòu)建一個用戶容易理解熟悉的界面動效。
如果動效使用得當(dāng)，則它既不會太引人注目，也不會不會分散用戶的注意。反之，您要么需要弱化動效，要么甚至將其刪除。動效不應(yīng)降低用戶操作速度或阻止用戶完成任務(wù)。
但是請不要忘記，動效不僅僅是一門科學(xué)更是一門藝術(shù)，因此最好提前對用戶進行試驗和測試。