熱評 林下遇夕

干貨滿滿,拿上小本本記下來

動效是用戶體驗的重要組成部分,也是產(chǎn)品調(diào)性的重要體現(xiàn)。如今動效設(shè)計也有了更多的解決方案,如 Framer、Principle、Flinto、Protopie 等,這些軟件在制作交互原型時,確實有更輕量便捷的優(yōu)勢,但效果也有一定的局限性,或者要求使用者有代碼基礎(chǔ),比較適合有針對性的人群。而 After Effects 作為動效軟件的鼻祖,以其強大的兼容性、效果豐富性和清晰明了的圖層操作邏輯深得設(shè)計師們喜愛,不論是 UI、運營還是多媒體類型的設(shè)計都能滿足,無疑是目前最具有普適性的動效軟件。本文從 AE 的插件、操作以及落地三個方面,為大家整理了一波實用技巧,希望能幫助大家在工作中更加得心應(yīng)手。

Part 1. 便捷靈活-不容錯過的精品插件

工欲善其事必先利其器,不論是 AE 還是其他軟件,好的插件都能配合軟件本身達到事半功倍的效果。這里介紹十款 AE 上不容錯過的精品插件。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

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 來說,無疑是補上了一個短板。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

最新的 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)系也是一目了然。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

官網(wǎng)鏈接: https://aeux.io/

2. 使用過程

Motion Tools:常用功能合輯

如果說 AE 只能裝一款插件,那必然是 Motion Tools 了,它將很多常用操作整合到一個面板上,并且可以跳過繁瑣的常規(guī)操作。包括快速調(diào)整曲線、定位圖層錨點、克隆關(guān)鍵幀、制作回彈效果、錯位圖層序列、生成多圖層空對象等。這里演示幾個常用功能。

快速調(diào)整速度緩動曲線:

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

不用再通過輸入表達式,做出操控便捷又靈活的回彈效果:

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

錨點是元素變換時的基準(zhǔn)點,更改錨點也是高頻操作。Motion Tools 不僅可以快速修改圖層錨點,并且支持多圖層批量操作:

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

官網(wǎng)鏈接: https://motiondesign.school/products/motion-tools/

Auto Crop:預(yù)合成裁切

新轉(zhuǎn)成的預(yù)合成尺寸總是占滿畫布,不方便做動畫且干擾其他圖層選擇。手動調(diào)節(jié)的話會影響元素的位置、位移等屬性,Auto Crop 很好地解決了這個問題,能夠?qū)㈩A(yù)合成裁切至適合當(dāng)前元素的尺寸。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

官網(wǎng)鏈接: https://aescripts.com/auto-crop

Auto Sway:飄動效果

Auto Sway 能夠很便捷的制作頭發(fā)或者服裝飄動的效果,在日常運營設(shè)計中,讓你的人物快速變得生動靈活起來。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

官網(wǎng)鏈接: https://aescripts.com/autosway

Trapcode Particular:粒子效果

AE 自身帶有粒子效果器,點擊“效果 → 模擬 → CC Particle World ”就是。但更強大更為人所熟知的卻是這款粒子插件—Red Giant旗下Trapcode插件包里的“Particular”。

很多運營或游戲頁面中的氛圍元素,例如落花、飄雪、灰燼、火花、彩帶等,Particular 都可以快速做出。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

除了運營設(shè)計,粒子在很多 UI 場景也同樣適用,例如結(jié)合形變或路徑做的飄散和拖尾效果,就可以用在充電或掃描等場景。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

官網(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)出的即使是又高清又流暢的大圖,也可以保持很小的體積。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

QQ 最新的 Q 彈超清表情,就是用 Lottie 實現(xiàn)的,大家可以在手機 QQ 上親自體驗這種爽滑 Q 彈的感覺哦。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

官網(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)作到素材交付上線的流程。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

官網(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 格式的插件。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

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也是小巧高清的。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

官網(wǎng)鏈接: https://aescripts.com/aftercodecs/

Part 2. 高效操作-效率翻倍的小技巧和快捷鍵

1. 實用小技巧

小技巧這部分,整理了 AE 高頻操作經(jīng)常會遇見的一些問題,以及對應(yīng)比較高效的解決方案。

用空對象調(diào)整元素

當(dāng)我們想調(diào)整的元素已經(jīng)打上過關(guān)鍵幀,這時直接調(diào)整元素的位置或縮放屬性,就會影響到原本的效果,使用空對象就可以解決這一問題。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

整體拉伸關(guān)鍵幀

關(guān)鍵幀比較多時,按住 “ Option ” 鍵,用鼠標(biāo)拖動最末尾的關(guān)鍵幀,可以對所選關(guān)鍵幀進行整體等比拉伸,并且支持多圖層同時操作。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

快速定位圖層中心錨點

新建形狀層的定位錨點總是不對齊圖層的中心,這在做一些帶縮放或旋轉(zhuǎn)屬性的動畫時就特別不方便,按住“Command”雙擊“平移錨點工具”,即可使圖層錨點快速對位到圖層中心。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

還有更直接的方法,就是在“首選項”里將“在新形狀圖層上居中放置錨點”打上勾,以后新建的形狀層錨點都會自動對齊圖層中心啦。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

中英文 AE 快速切換

AE 的很多插件和表達式對中文版本不兼容,包括很多教程也都是國外案例,所以其實直接用英文版的 AE 是最好的。但是難免也有跟我一樣看見英文界面就抓瞎的同學(xué),平時還是習(xí)慣用中文版,有需要時才換成英文版。這里介紹一種 AE 快速切換中英文的方法,對 2018 以上的版本都適用。

以 macOS 系統(tǒng)為例,在以下路徑找到:

前往 \ 電腦 \ Macintosh HD \ 資源庫 \ Application Support \ Adobe \ Adobe After Effects CC \ AMT \ application.xml

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

將“application.xml”這個文件用“文本編輯”打開,然后按“Command + F”使用查找命令,將“zh_CN”文本替換為“en_US”,保存后重啟 AE 就是英文版了。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

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ù)。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

2. 高效快捷鍵

雖然 AE 的全部快捷鍵可以寫滿長長一串列表,但在精不在多。實際使用時,其實只要記住一些常用的關(guān)鍵快捷鍵,就已經(jīng)可以效率翻倍,享受“鍵步如飛”的感覺了。

以最常用的“添加關(guān)鍵幀”為例,在不使用快捷鍵的前提下,想要給對象添加一個“位置”關(guān)鍵幀,需要至少 3 個步驟:

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

而使用快捷鍵 “ Option+Shift+P ”,一步即可完成,并且不會展開不相關(guān)的屬性:

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

這對于一個工程里需要用到成百上千次的 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

Part 3 .實際落地-動效輸出與標(biāo)注

設(shè)計再好的動效如果不能實際落地,那一切也只是徒勞,所以動效輸出在對接開發(fā)時非常關(guān)鍵。按照輸出和實現(xiàn)的方式不同,我們可以將動效分為兩種類型,一種是播放型動效,一種是交互型動效。

1. 播放型動效輸出

播放型動效是指在輸出時效果就已經(jīng)固定的動效,滿足觸發(fā)條件后播放出來,過程中并不會有影響效果的元素。

例如常見的 APP 底部導(dǎo)航點擊效果,icon 動效在用戶點擊時觸發(fā)播放,這個效果在輸出時就是固定的,不受任何其他因素影響,可以由設(shè)計師直接導(dǎo)出。

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

播放型動效有以下幾種比較常見的輸出格式:

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

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è)計師輸出的。

騰訊出品!AE 動效設(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)明動效元素

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

第二步則是將各元素的運動細(xì)節(jié)用具體參數(shù)描述清楚

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

結(jié)語

以上就是本文的全部內(nèi)容,希望能幫助大家在日常設(shè)計工作中有所幫助或從中獲得更多啟發(fā)。對文中提到的插件感興趣的朋友,也可以通過附上的鏈接去官網(wǎng)了解更多詳細(xì)介紹。

若是大家有更好的動效設(shè)計相關(guān)建議,也歡迎在評論區(qū)留言一起討論哦~

歡迎關(guān)注作者微信公眾號:「騰訊ISUX」

騰訊出品!AE 動效設(shè)計必備指南(附超多神器和技巧)

收藏 1489
點贊 221

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。