沒有原則的動效，不是優秀的動效

我們在APP中感受到真實的觸感，多虧了多樣的動效。但是要知道，動效要用得恰到好處，才能提高用戶的使用感。所以我們常說，沒有原則的動效，不是優秀的動效！

動效在APP內可謂是無處不在了，看了這麼多動效設計的分析和案例，你是否想更深入了解這些動效，到底是遵循了怎樣的原則，才能做出如此逼真且優秀的體驗呢？

動效運動的規則和原則，多少取決於我們對於物理世界的認知，即動效的運動規律要符合物理規律，因感受到如同現實世界般的親切自然。

本文將著重詮釋"緩動"這個概念，在動效中加入緩動的效果能夠讓運動顯得更加自然，這是運動的最重要的基本原則。這裏我們就用圖表的方式來表達運動：橫軸表示時間，縱軸表示在一個方向上的位移。

1 △ 勻速直線運動的座標圖

均勻的變化通常隻會用在色彩的改變或者透明的改變上，一般來說，我們也可以讓背景元素均勻運動，而前景元素保持不變，來呈現它的狀態，就像上圖一樣。

2 △ 加速曲線

當物體加速飛出屏幕的時候，可以使用這種加速曲線，比如界麵中被用戶使用滑動手勢甩出去的卡片。但是請記住，隻有當運動對象需要完全離開界麵的時候才會這麼使用，如果它還需要再回來的話，則不行。

3△ 減速曲線

減速曲線可以適用於多種不同的 UI控件和元素，包括從屏幕外進入屏幕內的的卡片、條目等。

4 △ 對稱和非對稱運動的差異

根據 Material Design 的規範，最好使用不那麼對稱的增速和減速的過程，讓動效看起來更加真實。同時大家會更加在意運動的結果，曲線的末端，也就是運動結束的過程最好進行適當的強調，換句話說就是減速過程持續的時長最好超過開始加速的時長，用戶將會更加清楚地觀察到運動的最終結果，從而更好地明白運動的終止狀態。

卡片元素從屏幕上運動的時候，不對稱的緩動曲線

抽屜式導航隨著緩動曲線從屏幕上隱藏

導航菜單的出現和消失

貝賽爾曲線函數 cubic-bezier（）就是用來描述運動曲線的，不同類型的 cubic-bezier（）的曲線和參數如上圖所示。

動畫曲線有助於正確傳達訊息，甚至表達情緒和感覺。在上麵的圖例當中，每個元素的運動位移是完全一樣的，所消耗的總時長也是一樣的，但是運動的速率變化是不同的，這一點也體現在曲線上，所表現出來的情緒也不同。

通過調整曲線，你能夠讓物體的運動軌跡盡可能接近現實世界。

是的，虛擬世界多少取決於現實世界，或是對現實世界一些動態做了誇大扭曲等藝術處理，以模擬現實世界的動態感受在虛擬的數據界麵上體現。當然，即使是遵循這麼多規律，動效的設計依然是一門藝術，而非單純的科學，多做測試多摸索總是有必要的。熟練掌握某款動效的軟件也能對藝術創作產生事半功倍的效果。