如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

作為視覺設計師你是否會遇到這樣的問題，當需要做一個 loading 或者其他動效的時候，總會或多或少的出現一些問題，如何使用更輕量的 Sketch 直接將矢量圖形轉到 AE 制作動效，如何不再受 GIF 導出的失真問題困擾，如何讓開發完美還原我們的動效設計稿等，如果你也存在這些疑問，那以下介紹的2款插件就可以完美的解決這些問題。

AEUX

AEUX 是由 Google 團隊推出的，運用在 Sketch 和 AE 的一組插件，能將 Sketch 里的圖層以及整個畫板一鍵導入到 AE 里，同時能在 AE 里解決圖形分組和分層的問題，減少導出圖片或者轉入 Illustrator 處理帶來的不必要的重復動作。

以下是我做的一個簡單小案例，通過此次案例將介紹怎么更好的使用這個插件：

首先在 Sketch 內將圖層進行分組，在多圖層的情況下，需要在前期進行動效構思，根據構思在 Sketch 里對圖層進行分組，所做的分組將會是你在 AE 里的合成分組。

分好組后該如何導入才能讓兩者圖層統一？

方法一：直接復制選中圖層

安裝好插件后，打開 AEUX，選擇你將導入到 AE 里的圖層，點擊 Send selection to Ae，同時在AE里打開安裝的 AEUX插件，在 BUILD COMP 區域出現了從 Sketch 導入的圖層數量，勾選 Precomp groups，點擊將自動加載入 AE 合成里。

方法二：導出json文件

從 Sketch 的 AEUX 面板里點擊 Export AEUX.json 導出 json 文件，打開 AE 的 AEUX 面板勾選中 Precomp groups，將導出的 json 拖入到 BUILD COMP 區域，或者點擊「曲別針」icon打開 json 文件。

這樣導入到 AE 里的圖層是以合成的形式展示 Sketch 里的分組。

避坑指南

如果在 sketch 內，分組圖層不在同一組內，導入 AE 后會出現變形和位移的情況。

如果 sketch 內形狀圖層有投影/漸變/point type 的編輯形狀時，導入 AE 后將出現投影消失，漸變消失，形狀變形的情況，在遇到這種情況時，會通過導出圖片的方式處理。

導入 AE 的 AEUX 面板時如果沒有勾選 Precomp groups，多圖層導入的情況下，組內的圖層都會生成在 AE 中的同一個合成中。

Sketch的AEUX面板其他功能介紹

1. Detach symbols

這是一個解除 symbol 的功能，在 sketch 內如果沒有解除 symbol，導入到 AE 里將出現圖形位移和變形的情況。

2. Flatten shapes

AEUX 支持布爾運算，但是在一個組中混合不同的運算符（如添加然后減去）對于Ae來說比較困難。點擊 Flatten shapes 可以合并布爾運算圖形。

3. Images to symbols

Sketch 只能導出它在畫板上看到的內容。如果在 sketch 內圖像的一部分超出畫板邊界，復制到 AE 內部的圖像將出現位移的情況。導出前點擊 Images to symbols 不會發生被裁剪和位移的情況。

AE的AEUX面板其他功能介紹

1. Come size multiplier：切換倍數

可以設置 sketch 畫板的倍數合成。

2. Auto build artboards：自動構建合成

導入前勾選此功能，在 sketch 的 AEUX面板中復制圖層后，在 AE 里不需要任何操作，它會自動復制圖層導入到創建合成中。

3. Convert to precomp：創建合成

同時選中單一圖層，可以將他們建立一個新的合成。

4. Un-Precomp group：解除合成分組

點擊可以解除合成的分組，變成單一的一個一個的圖層

5. Toggle Visibility：可以一鍵隱藏和顯示所有的父級圖層

6. Delete group layers：刪除父級圖層

雖然現在 AEUX 有些上面所講的功能不能支持，但是在一步步完善，希望可以幫助一些習慣用 sketch 畫插圖的設計師提高動效制作效率，減少不必要的操作步驟。

Bodymovin

在動效制作好后，通常我們會導出 mov 然后導入 PS 里生成 gif 格式，但是 gif 會出現質量過低的情況，比如漸變分層，邊緣有毛邊等情況，所以由2017年 Airbnb 團隊開發的 lottie 動效可以完美的解決這些問題，而實現 lottie 動畫需要在 AE 中安裝一款名為 Bodymovin 的插件。

Bodymovin 以 Android/iOS 原生動畫的形式在移動設備上渲染播放，在制作動效時導出 json 文件直接給到開發，可以幫助提高實現動效效率，同時提高動效質量。

1. 它還有很多的優點

• 它可以支持 Android、iOS平臺；
• 導出的文件體積小，方便開發使用；
• 實現效果佳，可以支持漸變等效果。

2. 在使用中有幾點注意

• 在使用前期，這種方法是否適合你現在所做的動效，lottie 是針對矢量動畫開發的，不太適合圖片過多的情況，圖片過多會增加文件負荷，所以最好是將圖片轉化為路徑動畫。
• 在 AE 里導入到 Lottie 的圖層不能識別矢量漸變。
• 不能支持外置插件的效果，比如粒子、光效等。
• 需要與前端開發溝通，他們是否愿意使用。
• 導出給開發的文件中需要有完整視頻參考，開發可以通過完整視頻知道 loading 位置和效果，同時如果出現 json 導出錯誤的情況，開發可以查看，遇到不一樣的地方可以詢問設計師。
• 開發完成后需要走查，看是否與你預期一致。

3. 所需軟件

ZXP installer

• LottieFiles（移動版）
• 插件：bodymovin

下面是一組之前做的頁面加載loading效果，開發小哥哥反饋：實現挺。

4. 步驟

下載ZXP installer：https://aescripts.com/learn/zxp-installer/

下載bodymovin：https://github.com/airbnb/lottie-web

下載之后，點開剛下載的 ZXP，點開頂部 file-open，打開 bodymovin插件。

當出現以下界面時代表已經安裝成功。

意外情況：在用 ZXP 安裝 bodymovin插件的時候出現以下提示。

原因是沒有通過 Adobe Creative Cloud 下載 AE，需要重新通過 Adobe Creative Cloud 下載。

打開AE，After Effect CC – 首選項 – 常規，勾選允許腳本寫入文件和訪問網絡。

打開窗口 – 擴展查看是否添加成功。

調出 Bodymovin 面板，選擇需要導出的合成。

點擊你要保存的 json文件地址，點擊 Render。

點擊 Brown 載入剛導出的 json文件，檢查動效是否有誤。

這時候就可以把 json 文件給到開發，如果 AE 合成中有圖片，需要把圖片放在文件夾內一起提供給開發，同時也會給到一個 gif文件，如果實現有不一樣的地方，開發可以詢問設計師。

如果想在移動端上瀏覽可以打開網址：https://www.lottiefiles.com/，下載安裝移動端客戶端（ios/Android）

注冊登錄成功后打開 Lottie Preview 添加 AE 里用 bodymovin 導出的 json文件。

藍藍設計( m.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。