接口中的動畫并不新鮮，在Facebook上，在我們的操作系統(tǒng)上，甚至在亞馬遜echo和谷歌助手上的LED燈上，我們都能看到它，但可能都沒有意識到，界面動畫幫助用戶了解如何使用產(chǎn)品、網(wǎng)站或應(yīng)用程序，但如何使用動畫創(chuàng)建更好的用戶體驗呢？

要記住一些最佳實踐

UI動畫必須：

讓用戶感覺自然

在用戶滿意之前增加用戶的理解

不能阻止用戶完成任務(wù)

不要分散用戶的注意力

通過遵循一組原則，您將沒有問題地滿足這些需求，您的用戶將為此感謝您

動畫的持續(xù)時間和速度

當元素改變它們的狀態(tài)或位置時，動畫的持續(xù)時間應(yīng)該足夠長，讓用戶有可能注意到變化，但同時動畫的持續(xù)時間應(yīng)該足夠短，不會引起等待。

許多研究發(fā)現(xiàn)，界面動畫的最佳速度在200到500毫秒之間，這些數(shù)字是基于人類大腦的特殊性質(zhì)和感知運動的能力。一般來說，小于100ms的動畫被認為是瞬時的，根本無法識別。而動畫超過1秒就會有延遲的感覺。

對于移動設(shè)備，材質(zhì)設(shè)計指南也建議將動畫的持續(xù)時間限制在200-300ms，至于平板電腦，使用時間應(yīng)該延長30%——大約400-450毫秒。原因很簡單：屏幕更大。當物體改變位置時，它們會克服較長的路徑?？纱┐髟O(shè)備的續(xù)航時間應(yīng)相應(yīng)地縮短30%，約150至200毫秒，因為在較小的屏幕上，飛行距離更短。

Web動畫的處理方式不同，習慣了在瀏覽器中幾乎是即時打開網(wǎng)頁的用戶也希望在不同的狀態(tài)之間快速切換。因此，web轉(zhuǎn)換的持續(xù)時間應(yīng)該比移動設(shè)備短兩倍左右，在150-200ms之間。在其他情況下，用戶不可避免地會認為計算機凍結(jié)或有互聯(lián)網(wǎng)連接問題。

當在網(wǎng)站上創(chuàng)建裝飾性動畫或試圖吸引用戶注意某些元素時，這些規(guī)則可以被忽略。在這些情況下，動畫可以更長。

需要記住的最重要的指導(dǎo)原則是，不管使用什么平臺，動畫的持續(xù)時間都應(yīng)該取決于移動的距離和對象的大小。較小的元素或動畫應(yīng)該移動得更快。具有大型和復(fù)雜元素的動畫在使用較長時間后看起來會更好。

在相同大小的運動物體中，第一個停下來的物體是經(jīng)過最短距離的物體。與大對象相比，小對象移動得更慢，因為它們會創(chuàng)建更大的偏移量。

寬松

放松有助于使物體的運動更自然。這是動畫的基本原則之一，在由兩位重要的迪斯尼動畫師奧利·約翰斯頓（Ollie Johnston）和弗蘭克·托馬斯（Frank Thomas）所著的《幻像人生：迪斯尼動畫》（the Illusion Life：Disney animation）一書中有詳細的描述。

為了使動畫看起來不像機械和人工的，物體應(yīng)該像物理世界中的物體一樣，以一定的加速度或減速運動。

線性運動

不受任何物理力影響的物體呈線性運動，換句話說，速度不變。正因為如此，它們看起來非常不自然和人為的人眼。

所有的動畫應(yīng)用程序都使用動畫曲線，該曲線顯示了同一時間間隔（x軸）內(nèi)物體（y軸）的位置如何變化。在當前情況下，移動是線性的。物體在同一時間內(nèi)走相同的距離。

線性運動確實有它的用途，例如，當對象更改顏色或透明度時，可以使用它。但是，一般來說，當對象不改變位置時，將其用于狀態(tài)。

易于加速或加速曲線

在這條曲線上，物體的位置開始變化緩慢，速度逐漸增加。這意味著物體以一定的加速度運動。

當物體以全速飛離屏幕時，應(yīng)使用此曲線。這些可能是接口中的系統(tǒng)通知或卡片。請記住，只有當對象永遠離開屏幕并且不能被收回或返回時，才應(yīng)該使用此方法。

動畫曲線有助于表達正確的情緒，在下面的例子中，我們可以看到所有對象的運動持續(xù)時間和距離都是一樣的，但是即使是曲線上很小的變化也會影響動畫的情緒。

緩和或減速曲線

這是易進曲線的倒數(shù)，物體迅速地跑過一段很長的距離，然后慢慢地減速，直到最后停下來。

當元素出現(xiàn)在屏幕上時，應(yīng)該使用這種類型的曲線。它在屏幕上全速飛行，然后逐漸減速，直到完全停止。這也可以應(yīng)用于從屏幕外部出現(xiàn)的卡片或?qū)ο蟆?/p>

放松或標準曲線

這條曲線使物體在開始時獲得速度，然后慢慢下降到零。這個動作在界面動畫中最常用。當你懷疑在動畫中使用哪種類型的運動時，使用標準曲線。

根據(jù)材料設(shè)計準則，非對稱曲線是最好的，因為運動看起來更自然和現(xiàn)實。曲線的終點必須比起點更強調(diào)，這樣加速度的持續(xù)時間就比減速的持續(xù)時間短。在這種情況下，用戶將更多地關(guān)注元素的最終移動，從而關(guān)注它的新狀態(tài)。

當對象從屏幕的一個部分移動到另一個部分時，使用Ease-in-out。在這種情況下，動畫避免了引人注目和戲劇性的效果。

當元素從屏幕上消失，但用戶可以隨時將其返回到之前的位置時，應(yīng)該使用相同的移動類型。例如，一個導(dǎo)航抽屜。

從這些例子中可以看出一個許多初學者忽略的基本規(guī)則：開始動畫并不等于結(jié)束動畫。就像在導(dǎo)航抽屜的例子中一樣，它以減速曲線出現(xiàn)，并以標準曲線消失。根據(jù)谷歌材料設(shè)計，物體出現(xiàn)的時間應(yīng)該更長，以吸引更多的注意。

函數(shù)cubic-bezier（）用于描述動畫曲線。它叫三次是因為它是基于四個點的。坐標0;0（左下角）的第一個點和坐標1;1（右上角）的最后一個點已經(jīng)在圖上定義。

基于只需要描述圖上的兩點，這兩點由函數(shù)cubic-bezier（）的四個參數(shù)給出。前兩個是第一個點的坐標x和y，后兩個是第二個點的坐標x和y。

為了簡化曲線處理，可以使用easings.net和-bezier.com網(wǎng)站。第一個包含最常用曲線的列表，您可以將這些曲線的參數(shù)復(fù)制到原型工具中。第二種方法允許用戶使用曲線的參數(shù)，并立即查看對象將如何移動。

總結(jié)

界面中的動畫應(yīng)該反映我們從物理世界中了解到的運動——摩擦、加速度等等。模仿現(xiàn)實世界中對象的行為可以創(chuàng)建一個序列，允許用戶理解從接口期望什么。

如果動畫構(gòu)建正確，它就不會引人注目，也不會分散用戶對目標的注意力。這意味著動畫不應(yīng)該減慢用戶的速度或阻止他們執(zhí)行任務(wù)。如果是這樣，動畫需要軟化，甚至刪除。

永遠記住，動畫與其說是一門科學，不如說是一門藝術(shù)，所以最好是對用戶進行試驗和測試。