今天我跟大家回顧包文奎的分享內(nèi)容，他在阿里移動事業(yè)群RED第三工作室工作，主要負責動效制作。積累了豐富的相關經(jīng)驗，提升動效實力看這篇就夠啦！

說包文奎大家可能不熟悉，但說到?Jadon7，哈哈，我們的七爺！說起來挺有意思的，他 dribbble 中國區(qū)排名第7，我們有次無意間聊起，你最近發(fā)的好像不那么勤了，他是我的幸運數(shù)字是7，正在嚴格控制。

能到中國區(qū)第7，作品質(zhì)量當然沒得說，很多作品都被 muzli 網(wǎng)站收錄，他們專門收錄優(yōu)質(zhì)作品。這樣的成績，按我們的話說就是：老鐵非常之7

一、為什么做動效

現(xiàn)階段，大家最關心的點是為什么做動效。這幾年我們不難發(fā)現(xiàn)，那些深受用戶喜愛的產(chǎn)品需要動效作為他的表現(xiàn)形式之一，動效設計不是只為了修飾，它用用戶易于接受的方式解決了現(xiàn)有問題。

二、動效分類

從大類上，動效可以分為兩類。一類是MG動效，增加產(chǎn)品魅力值和趣味性；另一類是交互動效，有效引導用戶理解層次結(jié)構(gòu)和空間關系，我們依次來說。

2.1 MG動效

這類動效在 UI 設計當中，大多數(shù)情況下都是為了增加產(chǎn)品魅力值和一些趣味性的點，可以幫助品牌在細節(jié)中流露出其特性，提升產(chǎn)品魅力值，表達應用情緒和氣質(zhì)，在產(chǎn)品內(nèi)部以及產(chǎn)品之間形成完整并且統(tǒng)一的操作體驗。

2.2 交互動效

交互動效可以非常有效的去引導用戶進入下一個頁面，可以把層次結(jié)構(gòu)和空間關系再屏幕內(nèi)外之間進行一個傳達。用7爺公司的產(chǎn)品夸克瀏覽器產(chǎn)品做得一個動效延伸，可以在你觸發(fā)一個行為之前預知到一個手勢會觸發(fā)的行為，以及它可以從好的方面去分散你的注意力。

三、如何提高

7爺能屢獲 muzli 收錄，凸顯了他動效的高超水準，他是如何提高的呢？居然有一套方法論你敢信。平時大量收集優(yōu)秀作品，在此基礎上進行一定的歸納分類和學習總結(jié)，有了一定的積累之后再進行一個提煉，最后再到實戰(zhàn)到落地。

大多數(shù)情況下收集素材的途徑除了 dribbble 和 behance 之外，vimeo 這類比較偏向于影視動畫類的網(wǎng)站也會經(jīng)常去瀏覽，還有像 iOS 和 Android 設備當中默認的一些動效也會經(jīng)常認真做一些拆解。

在此積累一定數(shù)量之后，進行一定的歸類整理，細分歸類到不同的一些文件夾，比方轉(zhuǎn)場，微交互，特效，車載之類的。然后每一個具體的動效會加一些特定標簽，方便在后期快速通過不同的關鍵詞找到參考。具體怎么分類和整理呢，在這里7爺給大家拋磚引玉的示范一下。

特別是在 dribbble 上，有大量優(yōu)質(zhì)內(nèi)容，7爺分享了一些他在 dribbble 上經(jīng)常關注的設計師，大家是不是該關注一波啦～

除此之外呢，還有一些產(chǎn)品做的也非常棒，像uc瀏覽器、夸克瀏覽器，動效體驗上做的都非常出色，以及Uber和Elevate這兩款產(chǎn)品，強烈推薦大家下載體驗。特別是最后推薦的是這款 App，被 App Store 連續(xù)推薦好多次，他是以動效著稱，幾乎每一個過渡和轉(zhuǎn)場都會有一些動效。

四、動效設計原則

一個動效設計需要具備的條件有四個，分別是：快速反饋、符合自然規(guī)律、洞察其他元素、明確視覺引導。

4.1?快速反饋

快速反饋的指動效需要對操作快速做出反饋和響應。比如現(xiàn)在很多 App 的出現(xiàn)水波反饋，對卡片添加投影表示高度發(fā)生變化，還有像最近 iOS11 中 App Store 的卡片在按壓狀態(tài)下的縮放。

效果有了，時間也很重要，慢了用戶會感到拖沓，快了用戶又會感到不適。這里，7爺推薦大家做移動端動效的持續(xù)時間是在 300 到 350 毫秒之內(nèi)。

超出這個時間就會給人的感受非常的慢，非常的遲鈍。雖然慢狀態(tài)下的作品能看到更多的細節(jié)和更細膩的過渡，但是實際落地的動效并不能因為這個成為他放慢的理由，下面就是個反例：

4.2?符合自然規(guī)律

（1）緩動

自然界中的動效一般都會受到各種各樣外界力量的影響。而且通常狀況下，沒有任何物體會突然動起來或者突然停下來，通常都會有一段從動態(tài)到靜止或者靜止到動態(tài)的過渡過程，那么作為動效設計為了遵循這個規(guī)律，就需要我們對動效加上一定的緩動。

（2）緩入

一個元素從屏幕外進入屏幕，他一瞬間的加速發(fā)生在屏幕外邊，你看不到他，他給人的感覺就是它從屏幕外邊特別快速的進入，用戶也不在乎他從哪兒來，只會留意它最后去了哪里，像這樣的曲線我們就稱之為緩入曲線。

（3）緩出

相反的，緩出曲線用在元素退出屏幕的時候，他的加速是遞增的，但是他的減速是一瞬間的，相同的，減速的一瞬間發(fā)生在屏幕外邊我們也就不會再去留意。

（4）弧形運動

動效除了基本的緩動之外，還需要另一個概念：弧形運動。為什么是弧線？自然世中就算是流星劃過也是一條弧線，純直線行走是沒有的，它或多或少都會受到這個力那個力的影響，我們在做動效的時候也可以加一些曲線。

是理解動效符合自然規(guī)律后，這里的每一個元素在轉(zhuǎn)場過渡中都考慮了不同重量會對外力做出的反饋，所以看起來會非常的順滑而又恰到好處。

4.3?洞察其他元素

我們用 uigreat 團隊中李超的作品跟大家演示下，表現(xiàn)動效在轉(zhuǎn)場過程中的元素變換。當元素切換進入界面的時候，它會考慮與周圍其他元素的關系，按照層次結(jié)構(gòu)變化，解釋這些元素從哪來，去理解 App 是如何構(gòu)建的。

元素或者模塊表面可以互相推開，在相同高度下的元素，一個元素展開就需要推開另一個元素或者模塊。

另一種情況下當元素上升到了不同的高度，就不需要再去推開周圍的元素了。

理解了他們之后，我們再看一下七爺?shù)囊粋€作品，前后元素在三個不同高度下跟周圍其他元素的互相影響。

4.4?明確視覺引導

最近幾年，蘋果、安卓以及微軟都在動效上大下功夫，并且動效設計現(xiàn)在越來越被受重視。

（1）共享元素

在頁面動效有一個比較關鍵概念叫共享元素。共享元素就是共同出現(xiàn)在相關聯(lián)的兩個頁面中，上個界面到下個界面的切換過中，共享元素不發(fā)生變化。

iOS 11 app store

但是注意，共享元素一般在界面中有一到兩個就足夠了，太多會導致用戶無法辨別哪個才是共享元素，不知道該跟著哪個。雖然在 MG 里可以，很多元素都動，很酷炫，但 UI 動效不行。所以：共享元素一般不會超過兩個。

（2）交錯元素

還有一種視覺引導的方式叫做交錯元素，利用每一個元素出現(xiàn)的先后順序來引導視線，核心理念是把視覺引導到一條直線上，單列的交錯一般情況下從上往下最為合適，會比不自然的出現(xiàn)和同時出現(xiàn)更容易引導用戶去做一些操作。

（3）交錯網(wǎng)格

交錯網(wǎng)格會復雜一些，適合場景有限，一般我們把網(wǎng)格當做一個整體，再把他們沿一個對角線依次展現(xiàn)出來，會比逐行處理更容易引導用戶去做一些操作，單列交錯或者網(wǎng)格交錯的錯幀時間一般建議是在20-25毫秒之間。

（4）提前預知

除了轉(zhuǎn)場動畫中的視覺引導之外，在轉(zhuǎn)場之前也可以通過一定的反饋提前預知操作的結(jié)果，比如這里一個簡單的卡片右滑，在不能滑動的情況下加上一定的阻力，表現(xiàn)他的不可滑動，相反當我們遇到可以滑動的項的時候可以讓他顯得更容易滑動。

五、插件分享

在此基礎上，7爺給大家推薦幾款插件，幫助大家提升效率。

5.1 sketch 2 ae

這款插件是谷歌最近推出的一款插件，只需要簡單的對 sketch 中的圖層用插件做一個復制粘貼就能完成從 sketch 到 ae 的導入，并且支持 “組” 和 “組件” 的導入，以及對矢量圖層的導入。

5.2 Trapcode

我們在 dribbble 上經(jīng)常都能看到這樣一些令人眼花繚亂的動效，像這樣的動效大多數(shù)都是使用 Trapcode 插件制作的。功能及其強大，合理利用能做出非常炫酷和順滑的效果，像下面這個我們 uigreat 成員做的效果。

5.3 Motion2

它主要用在 MG 動效領域，功能全面且十分實用。重點推薦三個功能：調(diào)節(jié)緩動、快速定位中心點、批量復制關鍵幀。AE 的操作雖然相當復雜，但是有了這款插件之后，就能大提高我們的效率。

5.4 Flow

我們在 AE 里調(diào)好的緩動，在和開發(fā)哥哥對接的時候他們是很頭大的，因為開發(fā)程序里讀取的是貝塞爾曲線，而非速度圖表。那么針對這種情況，7爺推薦flow這款插件，提供了25中可以直接給到開發(fā)的曲線類型。還可以導出 css緩動代碼，幫助團隊完成緩動復用。

最后

在動效設計中需要持續(xù)不斷的去吸收、借鑒新的動效靈感，大家也可以關注 7爺 的 dribbble bucket，他在里面對各類動效作品做了一些完整的收集，希望大家可以從中有所收獲。

7爺?shù)淖凡ㄓ脩裘篔adon7