如何使用更輕量高效的Sketch製作動效
作為視覺設計師你是否會遇到這樣的問題，當需要做一個loading或者其他動效的時候，總會或多或少的出現一些問題，如何使用更輕量高效的Sketch直接將矢量圖形轉到AE製作動效， 如何不在受GIF導出的失真問題困擾，如何讓開發完美還原我們的動效設計稿等，如果你也存在這些疑問，那以下介紹的2款插件就可以完美的解決我們現在的問題。
AEUX
AEUX是由 Google 團隊推出的，運用在 Sketch 和 AE 的一組高效插件，能將 Sketch 里的圖層以及整個畫板一鍵導入到 AE 里，同時能在AE里解決圖形分組和分層的問題，減少導出圖片或者轉入IIIustrator處理帶來的不必要的重複動作。
以下是我做的一個簡單小案例，通過此次案例將介紹怎麼去更好的使用這個插件：
首先在 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 面板其他功能介紹：
? Detach symbols
這是一個解除 symbol 的功能，在sketch內如果沒有解除 symbol，導入到 AE 里將出現圖形位移和變形的情況
? Flatten shapes
AEUX支持布爾運算，但是在一個組中混合不同的運算符（如添加然後減去）對於Ae來說比較困難。點擊 Flatten shapes 可以合併布爾運算圖形
? Images to symbols
Sketch只能導出它在畫板上看到的內容。如果在 sketch 內圖像的一部分超出畫板邊界，複製到AE內部的圖像將出現位移的情況。導出前點擊 Images to symbols 不會發生被裁剪和位移的情況
AE 的 AEUX 面板其他功能介紹：
? Come size multiplier:切換倍數
可以設置 sketch 畫板的倍數合成
? Auto build artboards：自動構建合成
導入前勾選此功能，在sketch的AEUX面板中複製圖層後，在 AE 里不需要任何操作，它會自動複製圖層導入到創建合成中
? Convert to precomp:創建合成
同時選中單一圖層，可以將他們建議一個新的合成
? Un-Precomp group：解除合成分組
點擊可以解除合成的分組，變成單一的一個一個的圖層
? Toggle Visibility：可以一鍵隱藏和顯示所有的父級圖層
? Delete group layers 刪除父級圖層
AEUX 現在雖然有些上面所講的功能不能支持，但是在一步步完善，希望可以幫助一些習慣用sketch畫插圖的設計師提高動效製作效率，減少不必要的操作步驟
Bodymovin
在動效製作好後，通常我們會導出 mov 然後導入 PS 里生成 gif 格式，但是 gif 會出現質量過低的情況，比如漸變分層，邊緣有毛邊等情況，所以由2017年 Airbnb 團隊開發的 lottie動效可以完美的解決這些問題，而實現 lottie 動畫需要在 AE 中安裝一款名為 Bodymovin的插件。
Bodymovin 以 Android/iOS 原生動畫的形式在移動設備上渲染播放，在製作動效時導出 json 文件直接給到開發，可以幫助提高實現動效效率同時提高動效質量。
同時它還有很多的優點：
? 它可以支持 Android、iOS平台
? 導出的文件體積小，方便開發使用
? 實現效果佳，可以支持漸變等效果
但在使用中要有幾點注意：
? 在使用前期，這種方法是否適合你現在所做的動效，lottie是針對矢量動畫開發的，不太適合圖片過多的情況，圖片過多會增加文件負荷，所以最好是將圖片轉化為路徑動畫
? 在ae里導入到 Lottie 的圖層不能識別矢量漸變
? 不能支持外置插件的效果，比如粒子、光效等
? 需要與前端開發溝通，他們是否願意使用
? 導出給開發的文件中需要有完整視頻參考，開發可以通過完整視頻知道 loading 位置和效果，同時如果出現 json 導出錯誤的情況，開發可以查看，遇到不一樣的地方可以詢問設計師
? 開發完成後需要走查，看是否與你預期一致
所需軟體
ZXP installer
? LottieFiles（移動版）
? 插件：bodymovin
下面是一組之前做的頁面載入loading效果，開發小哥哥反饋：實現挺高效
步驟：
1.下載ZXP installer：https://aescripts.com/learn/zxp-installer/x
2.下載bodymovin：https://github.com/airbnb/lottie-web
3.下載之後，點開剛下載的ZXP,點開頂部file-open，打開bodymovin插件
4.當出現以下界面時代表已經安裝成功
? 意外情況：在用ZXP安裝bodymovin插件的時候出現以下提示：
出現原因：沒有通過Adobe Creative Cloud下載AE，需要重新通過Adobe Creative Cloud下載
5.打開AE，After Effect CC-首選項-常規，勾選允許腳本寫入文件和訪問網路
6.打開窗口-擴展查看是否添加成功
7.調出 Bodymovin 面板，選擇需要導出的合成
8.點擊你要保存的json文件地址，點擊Render
9.點擊Brown載入剛導出的json文件，檢查動效是否有誤
10.這時候就可以把json文件給到開發，如果AE合成中有圖片，需要把圖片放在文件夾內一起提供給開發，同時也會給到一個gif文件，如果實現有不一樣的地方，開發可以詢問設計師
11.如果想再移動端上瀏覽可以打開網址：https://www.lottiefiles.com/，下載安裝移動端客戶端（Ios/Android）
12.註冊登錄成功後打開Lottie Preview添加AE里用bodymovin導出的json文件
13.打開手機里下載的Lottie App掃描右下角的二維碼就完成啦～
以上就是關於動效實現的一些插件小技巧，希望對有需要的設計師有一定的幫助，如果有不完善的地方，歡迎補充～
作者介紹：
羅曼，5年互聯網UI設計工作經驗，對視覺和動效有一定的研究探索，在移動端設計方面有較多的設計經驗，希望可以和大家多多學習，一起成長!
推薦閱讀：
