界面上的動畫效果并不新鮮，在我們的操作系統上，在網站和應用程序上面，我們都能看到它。但我們可能都沒有意識到，界面動畫能幫助用戶了解哪些東西，制作動畫又有哪些技巧，對我們的企業網站和應用程序的用戶體驗的提升又有什么幫助？

首先我們覺得制作動畫效果必須要有一定的原則，讓用戶感覺自然，然后在用戶滿意之前增加用戶的理解，再者就是不要分散用戶的注意力。通過這些原則我們就能很好的完成我們的動畫，并且給用戶帶來不一樣的感受，下面我們具體來講下這些原則。

動畫持續時間

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

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

對于移動設備，我們也建議將動畫的持續時間限制在200-300ms，至于平板電腦，使用時間應該延長30%——大約400-450毫秒。原因很簡單：屏幕更大。當物體改變位置時，它們會克服較長的路徑。可穿戴設備的續航時間應相應地縮短30%，約150至200毫秒，因為在較小的屏幕上，飛行距離更短。

網頁上的動畫的處理方式不同，習慣了在瀏覽器中幾乎是即時打開網頁的用戶也希望在不同的狀態之間快速切換。因此，web轉換的持續時間應該比移動設備短兩倍左右，在150-200ms之間。在其他情況下，用戶不可避免地會認為計算機有問題或有互聯網連接問題。當在網站上創建裝飾性動畫或試圖吸引用戶注意某些元素時，這些規則可以被忽略。在這些情況下，動畫可以更長。

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

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

線性運動

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

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

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

加速曲線

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

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

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

減速曲線

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

當元素出現在屏幕上時，應該使用這種類型的曲線。它在屏幕上全速飛行，然后逐漸減速，直到完全停止。這也可以應用于從屏幕外部出現的卡片或對象。

標準曲線

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

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

當對象從屏幕的一個部分移動到另一個部分時，使用Ease-in-out。在這種情況下，動畫避免了引人注目和戲劇性的效果。當元素從屏幕上消失，但用戶可以隨時將其返回到之前的位置時，應該使用相同的移動類型。例如，一個導航抽屜。

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

如果動畫構建正確，它就不會引人注目，也不會分散用戶對目標的注意力。這意味著動畫不應該減慢用戶的速度或阻止他們執行任務。如果是這樣，動畫需要軟化，甚至刪除。永遠記住，動畫與其說是一門科學，不如說是一門藝術，所以最好是對用戶進行試驗和測試。