2022-10-13 資深UI設(shè)計(jì)者
動(dòng)效是用戶(hù)體驗(yàn)的重要組成部分，也是產(chǎn)品調(diào)性的重要體現(xiàn)。如今動(dòng)效設(shè)計(jì)也有了更多的解決方案，如Framer、Principle、Flinto、Protopie等，這些軟件在制作交互原型時(shí)，確實(shí)有更輕量便捷的優(yōu)勢(shì)，但效果也有一定的局限性，或者要求使用者有代碼基礎(chǔ)，比較適合有針對(duì)性的人群。而After Effects作為動(dòng)效軟件的鼻祖，以其強(qiáng)大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設(shè)計(jì)師們喜愛(ài)，不論是UI、運(yùn)營(yíng)還是多媒體類(lèi)型的設(shè)計(jì)都能滿(mǎn)足，無(wú)疑是目前最具有普適性的動(dòng)效軟件。本文從AE的插件、操作以及落地三個(gè)方面，為大家整理了一波實(shí)用技巧，希望能幫助大家在工作中更加得心應(yīng)手。
工欲善其事必先利其器，不論是AE還是其他軟件，好的插件都能配合軟件本身達(dá)到事半功倍的效果。這里介紹十款A(yù)E上不容錯(cuò)過(guò)的精品插件。
AE與PS有很好的兼容性，PS的圖層以及各種樣式都能無(wú)偏差的導(dǎo)入到AE，但同樣是Adobe家族的AI，要導(dǎo)入AE卻特別麻煩，更不用說(shuō)沒(méi)有血緣的Sketch了。偏偏AI和Sketch卻經(jīng)常需要和AE打交道，這時(shí)候以下兩款插件便應(yīng)運(yùn)而生。
Overlord不僅可以實(shí)現(xiàn)AI導(dǎo)入AE，還能隨時(shí)從AE導(dǎo)回AI修改，這對(duì)本身不適合用于繪制圖形的AE來(lái)說(shuō)，無(wú)疑是補(bǔ)上了一個(gè)短板。
最新的Overlord支持路徑、形狀、參數(shù)圖形、剪切關(guān)系、文本、甚至大部分的漸變參數(shù)都能無(wú)偏差互導(dǎo)，并且可以設(shè)置導(dǎo)成子圖層還是獨(dú)立圖層，可以說(shuō)是非常方便了。
官網(wǎng)鏈接：https://www.battleaxe.co/overlord
如果說(shuō)Overlord是AI和AE之間的一座橋梁，那AEUX就是Sketch和AE之間的一座橋梁。導(dǎo)入前在Sketch里將圖層整理好，導(dǎo)入AE后圖層關(guān)系也是一目了然。
官網(wǎng)鏈接：https://aeux.io/
如果說(shuō)AE只能裝一款插件，那必然是Motion Tools了，它將很多常用操作整合到一個(gè)面板上，并且可以跳過(guò)繁瑣的常規(guī)操作。包括快速調(diào)整曲線、定位圖層錨點(diǎn)、克隆關(guān)鍵幀、制作回彈效果、錯(cuò)位圖層序列、生成多圖層空對(duì)象等。這里演示幾個(gè)常用功能。
快速調(diào)整速度緩動(dòng)曲線：
不用再通過(guò)輸入表達(dá)式，做出操控便捷又靈活的回彈效果：
錨點(diǎn)是元素變換時(shí)的基準(zhǔn)點(diǎn)，更改錨點(diǎn)也是高頻操作。Motion Tools不僅可以快速修改圖層錨點(diǎn)，并且支持多圖層批量操作：
官網(wǎng)鏈接：https://motiondesign.school/products/motion-tools/
新轉(zhuǎn)成的預(yù)合成尺寸總是占滿(mǎn)畫(huà)布，不方便做動(dòng)畫(huà)且干擾其他圖層選擇。手動(dòng)調(diào)節(jié)的話會(huì)影響元素的位置、位移等屬性，Auto Crop很好地解決了這個(gè)問(wèn)題，能夠?qū)㈩A(yù)合成裁切至適合當(dāng)前元素的尺寸。
官網(wǎng)鏈接：https://aescripts.com/auto-crop
Auto Sway能夠很便捷的制作頭發(fā)或者服裝飄動(dòng)的效果，在日常運(yùn)營(yíng)設(shè)計(jì)中，讓你的人物快速變得生動(dòng)靈活起來(lái)。
官網(wǎng)鏈接：https://aescripts.com/autosway
AE自身帶有粒子效果器，點(diǎn)擊“效果 → 模擬 → CC Particle World ”就是。但更強(qiáng)大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。
很多運(yùn)營(yíng)或游戲頁(yè)面中的氛圍元素，例如落花、飄雪、灰燼、火花、彩帶等，Particular都可以快速做出。
除了運(yùn)營(yíng)設(shè)計(jì)，粒子在很多UI場(chǎng)景也同樣適用，例如結(jié)合形變或路徑做的飄散和拖尾效果，就可以用在充電或掃描等場(chǎng)景。
官網(wǎng)鏈接：https://www.maxon.net/zh/red-giant-complete/trapcode-suite
Bodymovin能夠?qū)E中矢量圖形做成的動(dòng)效導(dǎo)成json文件，變成一串純粹的代碼，再被Lottie渲染還原出來(lái)。這就讓“尺寸”和“幀率”擺脫了以往體積的束縛，導(dǎo)出的即使是又高清又流暢的大圖，也可以保持很小的體積。
QQ最新的Q彈超清表情，就是用Lottie實(shí)現(xiàn)的，大家可以在手機(jī)QQ上親自體驗(yàn)這種爽滑Q彈的感覺(jué)哦。
官網(wǎng)鏈接：https://aescripts.com/bodymovin/
PAG（Portable Animated Graphics ）是一套完整的動(dòng)畫(huà)工作流，在動(dòng)畫(huà)導(dǎo)出與渲染方面和Lottie相似，但更進(jìn)一步的是，PAG還引入了視頻序列幀結(jié)合矢量的混合導(dǎo)出能力，這就保證了PAG能支持AE的所有特性和效果。
另外PAG還提供完善的桌面預(yù)覽工具、性能監(jiān)測(cè)可視化、運(yùn)行時(shí)可編輯等特點(diǎn)，能很好的打通設(shè)計(jì)與開(kāi)發(fā)之間，從創(chuàng)作到素材交付上線的流程。
官網(wǎng)鏈接：https://pag.io/
Gif格式因?yàn)椴恢С职胪该鲄^(qū)域且容易有鋸齒，如今的實(shí)際開(kāi)發(fā)中已經(jīng)有了Apng、Lottie等很多更好的替代方案，但在網(wǎng)頁(yè)瀏覽、文檔編輯等許多場(chǎng)景，還是需要使用Gif來(lái)演示動(dòng)效或者作為封面縮略圖。AE從2014版本后就不支持Gif導(dǎo)出了，而Gifgun就是一款能很好地導(dǎo)出Gif格式的插件。
Gifgun導(dǎo)出的格式小巧清晰，本文所有動(dòng)圖就是用這款插件導(dǎo)出，真香。
官網(wǎng)鏈接：https://aescripts.com/gifgun/
AE本身不支持直接導(dǎo)出MP4，很多時(shí)候只能先導(dǎo)出體積龐大的MOV格式，再通過(guò)第三方軟件轉(zhuǎn)成MP4，操作繁瑣不說(shuō)，還損失畫(huà)質(zhì)。
Adobe自家的多媒體編碼軟件Media Encoder，也可以完美導(dǎo)出MP4格式，不過(guò)這款軟件本身體積較大，每次打開(kāi)都要運(yùn)行很久。
這里推薦使用更實(shí)用的MP4導(dǎo)出軟件 — Aftercodecs。安裝后在輸出模塊設(shè)置里，就能找到對(duì)應(yīng)的導(dǎo)出項(xiàng)了，并且導(dǎo)出的MP4也是小巧高清的。
官網(wǎng)鏈接：https://aescripts.com/aftercodecs/
小技巧這部分，整理了AE高頻操作經(jīng)常會(huì)遇見(jiàn)的一些問(wèn)題，以及對(duì)應(yīng)比較高效的解決方案。
當(dāng)我們想調(diào)整的元素已經(jīng)打上過(guò)關(guān)鍵幀，這時(shí)直接調(diào)整元素的位置或縮放屬性，就會(huì)影響到原本的效果，使用空對(duì)象就可以解決這一問(wèn)題。
關(guān)鍵幀比較多時(shí)，按住 “ Option ” 鍵，用鼠標(biāo)拖動(dòng)最末尾的關(guān)鍵幀，可以對(duì)所選關(guān)鍵幀進(jìn)行整體等比拉伸，并且支持多圖層同時(shí)操作。
新建形狀層的定位錨點(diǎn)總是不對(duì)齊圖層的中心，這在做一些帶縮放或旋轉(zhuǎn)屬性的動(dòng)畫(huà)時(shí)就特別不方便，按住“Command”雙擊“平移錨點(diǎn)工具”，即可使圖層錨點(diǎn)快速對(duì)位到圖層中心。
還有更直接的方法，就是在“首選項(xiàng)”里將“在新形狀圖層上居中放置錨點(diǎn)”打上勾，以后新建的形狀層錨點(diǎn)都會(huì)自動(dòng)對(duì)齊圖層中心啦。
AE的很多插件和表達(dá)式對(duì)中文版本不兼容，包括很多教程也都是國(guó)外案例，所以其實(shí)直接用英文版的AE是最好的。但是難免也有跟我一樣看見(jiàn)英文界面就抓瞎的同學(xué)，平時(shí)還是習(xí)慣用中文版，有需要時(shí)才換成英文版。這里介紹一種AE快速切換中英文的方法，對(duì)2018以上的版本都適用。
以macOS系統(tǒng)為例，在以下路徑找到：
前往 \ 電腦 \ Macintosh HD \ 資源庫(kù) \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml
將“application.xml”這個(gè)文件用“文本編輯”打開(kāi)，然后按“Command + F”使用查找命令，將“zh_CN”文本替換為“en_US”，保存后重啟AE就是英文版了。
Windows也是同理，對(duì)應(yīng)路徑為：
C: \ Program Files \ Adobe \ Adobe After Effects CC \ Support Files \ AMT \ application.xml
然后將“application.xml”這個(gè)文件用“記事本”打開(kāi)，同樣的查找“zh_CN”后替換“en_US”就好。
之后可以將“application.xml”文件分別存一份“zh_CN”中文和“en_US”英文的版本，下回再要切換時(shí)，直接將對(duì)應(yīng)的“application.xml”文件復(fù)制到原路徑替換即可。
新置入一段想要循環(huán)的視頻素材時(shí)，很多人習(xí)慣將素材復(fù)制多次，或者通過(guò)時(shí)間重映射打上關(guān)鍵幀后在添加循環(huán)表達(dá)式。其實(shí)并不需要這么麻煩，在項(xiàng)目窗口右鍵對(duì)應(yīng)的素材，選擇“解釋素材 → 主要”，在彈出窗口直接就可以設(shè)置素材循環(huán)次數(shù)。
雖然AE的全部快捷鍵可以寫(xiě)滿(mǎn)長(zhǎng)長(zhǎng)一串列表，但在精不在多。實(shí)際使用時(shí)，其實(shí)只要記住一些常用的關(guān)鍵快捷鍵，就已經(jīng)可以效率翻倍，享受“鍵步如飛”的感覺(jué)了。
以最常用的“添加關(guān)鍵幀”為例，在不使用快捷鍵的前提下，想要給對(duì)象添加一個(gè)“位置”關(guān)鍵幀，需要至少3個(gè)步驟：
而使用快捷鍵 “ Option+Shift+P ”，一步即可完成，并且不會(huì)展開(kāi)不相關(guān)的屬性：
這對(duì)于一個(gè)工程里需要用到成百上千次的k幀操作來(lái)說(shuō)，著實(shí)可以省下不少時(shí)間，可以說(shuō)是不得不用的一個(gè)快捷操作。
秉持在精不在多的原則，整理出以下一些高效又常用的快捷鍵，親測(cè)好用哦！
因?yàn)樽髡呤荕acOS系統(tǒng)，所以下文中提到的 Option 可以對(duì)應(yīng) Windows 的 Alt ； Command 對(duì)應(yīng) Windows 的 Control 。
五大基礎(chǔ)變換屬性
在對(duì)應(yīng)圖層使用這五個(gè)快捷鍵，即可快速展開(kāi)或收起對(duì)應(yīng)屬性。
位置：P（Position）
縮放：S（Scale）
旋轉(zhuǎn)：R（Rotation）
不透明度：T（Transparency）
錨點(diǎn)：A（Anchor）
常用工具選擇
選擇工具：V
形狀工具：Q
鋼筆工具：P
攝像機(jī)工具：C
關(guān)鍵幀操作
快速添加關(guān)鍵幀：Option + Shift + “ * ”（ * = 對(duì)應(yīng)屬性快捷鍵）
向右移動(dòng)關(guān)鍵幀一幀：Option + 右箭頭
向左移動(dòng)關(guān)鍵幀一幀：Option + 左箭頭
向右移動(dòng)關(guān)鍵幀十幀：Option + Shift + 右箭頭
向左移動(dòng)關(guān)鍵幀十幀：Option + Shift + 左箭頭
緩動(dòng)關(guān)鍵幀：F9
時(shí)間指針操作
定位到上一可見(jiàn)關(guān)鍵幀：J
定位到下一可見(jiàn)關(guān)鍵幀：K
定位到圖層入點(diǎn)：I
定位到圖層出點(diǎn)：O
設(shè)置當(dāng)前為工作區(qū)開(kāi)始：B
設(shè)置當(dāng)前為工作區(qū)結(jié)束： N
圖層操作
將圖層拆分 ：Shift + Command + D
裁去時(shí)間線左側(cè)圖層：Option + [
裁去時(shí)間線右側(cè)圖層：Option + ]
設(shè)置當(dāng)前為入點(diǎn)： [
設(shè)置當(dāng)前為出點(diǎn)： ]
復(fù)制圖層：Command + D
其他常用操作
展開(kāi)/收起帶關(guān)鍵幀的屬性：U
展開(kāi)/收起所有屬性：UU
展開(kāi)/收起遮罩屬性：M
展開(kāi)/收起音頻屬性：L
轉(zhuǎn)為預(yù)合成：Shift + Command + C
圖像自適應(yīng)合成寬高：Shift + Option + F
After Effects官方快捷鍵大全：https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html
設(shè)計(jì)再好的動(dòng)效如果不能實(shí)際落地，那一切也只是徒勞，所以動(dòng)效輸出在對(duì)接開(kāi)發(fā)時(shí)非常關(guān)鍵。按照輸出和實(shí)現(xiàn)的方式不同，我們可以將動(dòng)效分為兩種類(lèi)型，一種是播放型動(dòng)效，一種是交互型動(dòng)效。
播放型動(dòng)效是指在輸出時(shí)效果就已經(jīng)固定的動(dòng)效，滿(mǎn)足觸發(fā)條件后播放出來(lái)，過(guò)程中并不會(huì)有影響效果的元素。
例如常見(jiàn)的APP底部導(dǎo)航點(diǎn)擊效果，icon動(dòng)效在用戶(hù)點(diǎn)擊時(shí)觸發(fā)播放，這個(gè)效果在輸出時(shí)就是固定的，不受任何其他因素影響，可以由設(shè)計(jì)師直接導(dǎo)出。
播放型動(dòng)效有以下幾種比較常見(jiàn)的輸出格式：
Gif、Apng、Webp本質(zhì)上都是將位圖進(jìn)行壓縮和轉(zhuǎn)換，而Lottie則是基于代碼層面的動(dòng)畫(huà)渲染，PAG則結(jié)合了兩者的特性。目前一般使用Apng、Lottie、和PAG就已經(jīng)可以覆蓋大部分的輸出場(chǎng)景，是可以?xún)?yōu)先考慮的動(dòng)圖格式。
交互型動(dòng)效是指變換內(nèi)容跟我們的交互操作相關(guān)聯(lián)的動(dòng)效，并且包含無(wú)法由設(shè)計(jì)師直接導(dǎo)出的元素，比如用戶(hù)的頭像、名稱(chēng)等。
比如這個(gè)支付面板切換的效果，變換的元素中包含了用戶(hù)的余額和綁卡信息，這些信息是無(wú)法由設(shè)計(jì)師輸出的。
這種動(dòng)效需要開(kāi)發(fā)在代碼側(cè)還原。如果只是輸出視頻demo，開(kāi)發(fā)同學(xué)很難將其中的細(xì)節(jié)（例如時(shí)間出入點(diǎn)、曲線速率等）還原出來(lái)。這就需要設(shè)計(jì)師有一份清晰的標(biāo)注文檔，將動(dòng)效的細(xì)節(jié)參數(shù)跟開(kāi)發(fā)更好的明確下來(lái)。
一份規(guī)范的動(dòng)效標(biāo)注文檔，至少應(yīng)該包含以下幾個(gè)方面，
觸發(fā)：在什么條件下觸發(fā)動(dòng)效，例如點(diǎn)擊、雙擊、滑動(dòng)、長(zhǎng)按等；
對(duì)象：發(fā)生變換的對(duì)象，例如按鈕、列表、文字等；
屬性：具體變換的屬性，例如位移、縮放、不透明度等；
參數(shù)：換化屬性的具體參數(shù)，例如不透明度值從0到1；
時(shí)長(zhǎng)：變換的起始時(shí)間點(diǎn)、持續(xù)時(shí)間；
曲線：變換的速率曲線，描述在固定的時(shí)長(zhǎng)范圍內(nèi)，速度是如何變化的；
以上圖的支付面板首次切換過(guò)程為例，我們的標(biāo)注文檔是這樣的：
第一步定義好頁(yè)面的起始和結(jié)束狀態(tài)，并標(biāo)明動(dòng)效元素
第二步則是將各元素的運(yùn)動(dòng)細(xì)節(jié)用具體參數(shù)描述清楚
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
作者：騰訊ISUX團(tuán)隊(duì) 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.hglv.net