如何用好動效元素？

在頁面當中的動效要設計得自然，一般需要通過形變、運動時間及緩動曲線來實現。形變表現的是動效元素自身的質地，運動時間及緩動曲線則是表現動效元素周圍的環境。

因此，要如何設置緩動曲線以及時間，讓動效設計得順暢而自然，不妨參考以下的建議：

1.linear曲線（勻速運動）除了一些特殊場景如載入、星空背景外，其實很少被使用。

2.easeIn（先緩後快）頁面中的場景適用也不多，主要適用於掉落、toWhere的場景當中使用。

3.easeInOut（頭尾緩、中間快）通常在需要輪轉切換的場景中使用，這類動效元素的觸發物件與運動物件並不是同一個元素。

4.easeOut（先快後緩）最常見的效果，其觸發物件與運動物件往往是同一個。主要用在展開、收起、出現、移動等動畫中。因此，當不知道要用哪個緩動曲線時，就適用這個吧。

5.曲度主要表現動效元素運動過程的力的大小，曲度越大，啟示力或阻力越大。

6.回彈則表現的是動效元素運動的劇烈程度及質地。

7.動效元素運動時間一般需要控制在0.3s-0.8s之間，過長的時間會讓用戶感覺拖遝，不自然。