動效是設計師的一個主要發力點，界面里加入動效，可以增加趣味性和引導性。從業務層面來看，設計師首先要積累這方面的技能經驗，到了實際項目中才有發揮的空間，較大程度地給業務賦能。所以，我結合常用的界面動效場景，輸出了不少練習作品，對一些細節技巧有點感悟，和大家分享下。

大綱如下：

1. 彈簧原則
2. 有質感的形變動效
3. 有節奏感的緩動曲線
4. 符合生活場景
5. 錯位運動打造層次感
6. 圖形變化，路徑重組
7. 一些動效練習

彈簧原則

我們生活中的彈簧，一邊固定，另一邊用手拉伸后放開，它會經歷多次來回彈動后才靜止。這種運動過程可以延伸到我們的動效設計中，彈動次數不宜太多，容易造成反饋不及時的問題。我一般設置三次彈動，想了些口訣：上下上、大小大。

比如一個元素縮放比例從 0%到 100%，我們可以看下常規運動和彈性運動的對比。

果然，模擬的彈簧彈性運動更自然舒適。

有質感的形變動效

彈性運動離不開生活場景，一個柔軟的小球，下落碰到地面會產生擠壓，彈起時候會產生拉伸，看起來很 Q 彈。

當我看到這個運動時，動效思維瞬間發散開了。比如工具欄的圖標，常規想法可能就是元素在中心點從小到大進行彈性運動。不過，我們利用小球形變運動原理，可以做出一些差異化的設計，可以看下對比。

個人比較喜歡形變的彈性運動，更耐看。

有節奏感的緩動曲線

循環的加載運動，使用普通緩動曲線（逐漸加快逐漸變慢）會稍微有點呆板，這時候我們可以使用強調型的緩動曲線（快速加快逐漸變慢），可以看下對比。

符合生活場景

動效結合生活場景，可以設計出一些有創意性的動畫。大拇指點贊，我們習慣先收起大拇指，然后再點贊；有個細節，我們手也是會跟著運動的。結合這個運動過程設計點贊動效，我們再加一點修飾來加強點贊感知，俏皮的效果就出來了。

錯位運動打造層次感

為了豐富動畫效果和層次感，我常用的技巧就是元素錯位運動，可以是方向的錯位，也可以是時間上的錯位。比如金山知識庫官網的頭圖動效，就有運用到方向錯位原則，元素朝不同方向運動，營造空間縱深感。

圖形變化，路徑重組

圖形變化動效在界面中也是可以用到的，路徑重組就是我運用的一個方法。難點在于元素的連貫性和流暢性，多練就好了，看下效果。

一些動效練習

動手能力對于設計師來說是很重要的，可以學習技能、創意點、細節處理等，才能更好更快地運用到業務上。近期我輸出了一些 UI 動效練習，也嘗試了斷線圖標的設計風格，看看吧。

總結

以上就是我在動效設計中常運用到的小技巧和相關練習作品，在思維和技能上真的成長了很多。不過，動效方面還有很大的提升空間，繼續學習去了！

歡迎關注作者微信公眾號：「ALEI的設計思考」