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