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