1、關(guān)于動(dòng)效分類(lèi)

首先我們先區(qū)分幾個(gè)動(dòng)效的概念。

MG動(dòng)畫(huà)

MG動(dòng)畫(huà)（Motion Graphics），簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是圖文動(dòng)畫(huà)的意思。MG動(dòng)畫(huà)的整體運(yùn)用十分廣泛，其中包括電影開(kāi)頭,電視開(kāi)頭,欄目包裝,產(chǎn)品演示,廣告節(jié)目等各個(gè)領(lǐng)域。

作為互聯(lián)網(wǎng)設(shè)計(jì)師，我們可以使用簡(jiǎn)單的MG動(dòng)畫(huà)來(lái)進(jìn)行APP展示：比如app store的video、官網(wǎng)video或者工作匯報(bào)中的的項(xiàng)目成果展示，總體我們可以把它劃分在品牌設(shè)計(jì)的類(lèi)別中。

表情包動(dòng)圖

如今的微信表情平臺(tái)發(fā)展成了一個(gè)表情包行業(yè)，可以讓設(shè)計(jì)師發(fā)布自己設(shè)計(jì)的表情包供微信用戶使用，其中一部分表情包是帶有動(dòng)效的，即逐幀動(dòng)畫(huà)的產(chǎn)物，以小gif的格式呈現(xiàn)。

UI交互動(dòng)效

在用戶體驗(yàn)界面設(shè)計(jì)中，因交互需求而發(fā)生的動(dòng)效設(shè)計(jì)，例如：loading、轉(zhuǎn)場(chǎng)、點(diǎn)擊反饋等?，F(xiàn)在越來(lái)越多專(zhuān)業(yè)化UX交互動(dòng)效軟件助力實(shí)現(xiàn)html在手機(jī)上的實(shí)時(shí)操作反饋，就仿佛你不用代碼做了一個(gè)app出來(lái)。

2、關(guān)于做動(dòng)效的軟件

之前經(jīng)常看到動(dòng)效作品底下總會(huì)有童鞋在下問(wèn)“大佬，哪個(gè)軟件做的呀？”，這里來(lái)做個(gè)統(tǒng)一總結(jié)，以后這種問(wèn)題就不用再去問(wèn)別人了。

1. Adobe After Effects

大家最熟悉不過(guò)的AE，做UI動(dòng)效最常見(jiàn)的軟件。

優(yōu)點(diǎn)：面向電影特效的軟件，可以完成的動(dòng)效種類(lèi)與復(fù)雜程度可想而知，靈活配合阿逗比自家的ps、ai占盡方便，可提供Lottie動(dòng)畫(huà)庫(kù)Jason

文件缺點(diǎn)：入門(mén)門(mén)檻高，功能繁雜，學(xué)習(xí)成本高；

導(dǎo)出格式：mov視頻文件。

2. Adobe Photoshop

嗯對(duì)，你沒(méi)有看錯(cuò)，是你每天都要打開(kāi)的阿逗比家ps，它也是可以做動(dòng)效的。

優(yōu)點(diǎn)：同樣使用timeline設(shè)計(jì)動(dòng)效，操作較簡(jiǎn)單；

缺點(diǎn)：可完成的動(dòng)效效果寥寥無(wú)幾，適合用來(lái)完成逐幀動(dòng)畫(huà)（如表情包里的簡(jiǎn)單小gif）；

導(dǎo)出格式：gif動(dòng)圖文件。

3. Hype 3

如果說(shuō)AE是UX動(dòng)效屆的ps（功能繁雜且全面），那么Hype 3應(yīng)該就是UX動(dòng)效屆的sketch（針對(duì)性強(qiáng)且易操作）。

優(yōu)點(diǎn)：易上手、無(wú)需代碼可以實(shí)現(xiàn)實(shí)時(shí)交互動(dòng)效操作、原生界面支持中文，3.0版本后支持更多動(dòng)畫(huà)效果。

缺點(diǎn)：可完成動(dòng)效效果有限。

導(dǎo)出格式：gif動(dòng)圖/視頻/png/Html，pc、mobile實(shí)時(shí)操作。

4. Flinto/Principle

其實(shí)這2玩意差不太多，都是更簡(jiǎn)易版的Hype 3。

優(yōu)點(diǎn)：操作簡(jiǎn)單的一如sketch，有sketch插件可以配合使用，效率高，無(wú)需代碼可以實(shí)現(xiàn)實(shí)時(shí)交互動(dòng)效操作。

缺點(diǎn)：可完成動(dòng)效效果比Hype 3還有限。

導(dǎo)出格式：視頻mov，鏈接只能在手機(jī)上同步預(yù)覽，可錄屏。

5. Keynote

這個(gè)應(yīng)該是設(shè)計(jì)師都知道的神器，一如宣傳語(yǔ)“讓你的演示文稿提神提氣、出類(lèi)拔萃“，比PPT好用一萬(wàn)倍。

優(yōu)點(diǎn)：無(wú)腦操作，效果一流

缺點(diǎn)：僅有有效的過(guò)渡功效

導(dǎo)出格式：keynote文件

3、UI動(dòng)效常用核心技能盤(pán)點(diǎn)

因?yàn)樵谧魑淮蟛糠侄际荱X設(shè)計(jì)師，所以以下著重介紹一下如何用AE實(shí)現(xiàn)幾個(gè)核心UI動(dòng)效技能點(diǎn)。

Skill Point 1：緩動(dòng)

交互動(dòng)效的初衷是為了給產(chǎn)品帶來(lái)舒適的用戶體驗(yàn)，那么從本質(zhì)上每一個(gè)交互動(dòng)效的過(guò)渡都應(yīng)該遵從物理曲線與緩動(dòng)原則，比如下拉的重力感、過(guò)場(chǎng)的緩入緩出，避免產(chǎn)品像機(jī)器般給用戶帶來(lái)生硬的感受。

AE應(yīng)用

• 1. 選中關(guān)鍵幀—?jiǎng)赢?huà)>關(guān)鍵幀輔助>緩動(dòng) | animation>keyframe assistant>easy ease （或點(diǎn)擊關(guān)鍵幀右鍵>關(guān)鍵幀輔助>緩動(dòng)）
• 2. 圖形編輯器>使視圖適應(yīng)所有曲線>拖動(dòng)端點(diǎn)調(diào)整曲線 | Graph Editor > Fit all graphs to view

Skill Point 2：遮罩

遮罩功能可以解決許多你想不到的動(dòng)效問(wèn)題，達(dá)到一個(gè)比如魔術(shù)化的效果，也是MG動(dòng)畫(huà)轉(zhuǎn)場(chǎng)常用功能之一。簡(jiǎn)單理解來(lái)說(shuō)，就是將動(dòng)效分為2層（底層是展示圖，頂層是遮罩），通過(guò)改變的遮罩大小，我們可以看到底層展示圖的不同部分。

AE應(yīng)用

• 1. 選中形狀工具在固態(tài)層或合成的預(yù)合成 | solid 或者 Pre-compose上畫(huà)一個(gè)形狀（即完成該圖層的遮罩mask）；
• 2. 下拉遮罩屬性即可調(diào)整遮罩路徑、大小、羽化、透明度等數(shù)值；

Skill Point 3：值變

工具型APP中常用的數(shù)值變化動(dòng)效，可以靈活展現(xiàn)數(shù)字變化的過(guò)程，在MG動(dòng)畫(huà)中使用也是一種數(shù)據(jù)的震撼表現(xiàn)方式。

AE應(yīng)用

• 1. 新建文本層并選中—效果>文本>數(shù)字 | Effect>texts>numbers
• 2. 參數(shù)設(shè)置

Skill Point 4：3D翻轉(zhuǎn)

設(shè)置3D屬性可以讓物體擁有XY軸空間，立體化表達(dá)物體概念。

AE應(yīng)用

• 1.打開(kāi)圖層3D圖層屬性 | 3D layer
• 2.設(shè)置XY軸屬性

Skill Point 5：毛玻璃效果

iOS源生的毛玻璃效果在很多動(dòng)效軟件上都受到限制，當(dāng)然AE是無(wú)所不能的。這里單獨(dú)作為一個(gè)技能點(diǎn)來(lái)和大家分享還因?yàn)锳E中毛玻璃效果的制作還會(huì)牽扯到一個(gè)關(guān)鍵點(diǎn)——“調(diào)節(jié)層”的使用，通過(guò)毛玻璃的應(yīng)用大家應(yīng)該可以舉一反三出它的更多用法。

AE應(yīng)用

• 1. 圖層>新建>調(diào)節(jié)層 | layer>new>adjustment layer (注意該圖層需要位于需要被模糊的圖層與毛玻璃遮罩圖層之間）
• 2. 選中調(diào)節(jié)層—效果>模糊與銳化>高斯模糊
• 3. 建立一個(gè)遮罩圖層（遮罩形狀大小調(diào)整為毛玻璃展現(xiàn)區(qū)域形狀大?。?/li>
• 4. Ctrl C復(fù)制遮罩圖層路徑>Ctrl V粘貼到調(diào)整層
• 5. 按照需求調(diào)節(jié)遮罩圖層的透明度屬性即可看到毛玻璃效果咯

Skill Point 6：修剪路徑（開(kāi)放式）

UI動(dòng)效中高頻出現(xiàn)的路徑描繪動(dòng)效實(shí)現(xiàn)技能，從LOGO到圖標(biāo)都可以通過(guò)AI導(dǎo)入形狀路徑來(lái)完成路徑描繪動(dòng)效。這里只介紹比較實(shí)用的開(kāi)放式修剪路徑（即線條路徑），封閉式修剪路徑應(yīng)用不多（即形狀路徑）。

AE應(yīng)用

• 1. 形狀圖層>添加>修剪路徑 | shape layer>add>Trim Paths
• 2. 設(shè)置結(jié)束、開(kāi)始屬性，完成路徑動(dòng)效

Skill Point 7：融合

圖形的融合變換，有很多種做法，這里介紹效果最好的一種。

AE應(yīng)用

• 1. 新建調(diào)節(jié)層—效果>快速模糊 | Effect>fast blur

效果>色階 | Effect>levels

• 2. 參數(shù)調(diào)整

Skill Point 8：抖動(dòng)

緩慢抖動(dòng)是常在動(dòng)態(tài)mockup中見(jiàn)到的效果，這里應(yīng)用到“表達(dá)式”的使用，也是屬于可以舉一反三應(yīng)用于多種地方的重要技能點(diǎn)。其中可以使用表達(dá)式的除了抖動(dòng)效果，還有頭尾相接的無(wú)限循環(huán)等。

AE應(yīng)用

• 1. alt 需要抖動(dòng)圖層屬性關(guān)鍵幀小秒表>在時(shí)間軸上出現(xiàn)的空間里寫(xiě)上wiggle(數(shù)值A(chǔ)，數(shù)值B)
• 2. 調(diào)整數(shù)值A(chǔ)（每秒震動(dòng)次數(shù)）、B（運(yùn)動(dòng)范圍像素值）達(dá)到自己想要的抖動(dòng)效果（我一般用1,20達(dá)到一個(gè)緩動(dòng)的效果）

Skill Point 9：水波紋

之前做手機(jī)清理類(lèi)APP經(jīng)常會(huì)涉及到的流量表達(dá)動(dòng)效，雖然做起來(lái)不是很簡(jiǎn)單，但是效果非常好。這里應(yīng)用的是“置換圖”技能，大家同樣可以使用“置換圖”方法舉一反三。

AE應(yīng)用

• 1. 新建形狀圖層（命名為“波浪”）>效果>扭曲>置換圖 | new shape layer>effect>distort>replacement map
• 2. 新建固態(tài)層>效果>無(wú)線電波 | new solid layer>effect>radio wave
• 3. 將2中的固態(tài)層合成預(yù)合成，命名為“置換圖”（注意轉(zhuǎn)移所有屬性）
• 4. 將“置換圖”預(yù)合成的開(kāi)始點(diǎn)移到最左邊—效果>快速模糊 | effect>fast blur
• 5. 點(diǎn)擊”波浪“層的置換圖屬性，選擇“置換圖”預(yù)合成替換
• 6. 隱藏“置換圖”預(yù)合成