2019-3-20 資深UI設計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
作為視覺設計師你是否會遇到這樣的問題，當需要做一個 loading 或者其他動效的時候，總會或多或少的出現(xiàn)一些問題，如何使用更輕量的 Sketch 直接將矢量圖形轉到 AE 制作動效，如何不再受 GIF 導出的失真問題困擾，如何讓開發(fā)完美還原我們的動效設計稿等，如果你也存在這些疑問，那以下介紹的2款插件就可以完美的解決這些問題。AEUX 是由 Google 團隊推出的，運用在 Sketch 和 AE 的一組插件，能將 Sketch 里的圖層以及整個畫板一鍵導入到 AE 里，同時能在 AE 里解決圖形分組和分層的問題，減少導出圖片或者轉入 Illustrator 處理帶來的不必要的重復動作。
以下是我做的一個簡單小案例，通過此次案例將介紹怎么更好的使用這個插件：
首先在 Sketch 內(nèi)將圖層進行分組，在多圖層的情況下，需要在前期進行動效構思，根據(jù)構思在 Sketch 里對圖層進行分組，所做的分組將會是你在 AE 里的合成分組。
方法一：直接復制選中圖層
安裝好插件后，打開 AEUX，選擇你將導入到 AE 里的圖層，點擊 Send selection to Ae，同時在AE里打開安裝的 AEUX插件，在 BUILD COMP 區(qū)域出現(xiàn)了從 Sketch 導入的圖層數(shù)量，勾選 Precomp groups，點擊將自動加載入 AE 合成里。
方法二：導出json文件
從 Sketch 的 AEUX 面板里點擊 Export AEUX.json 導出 json 文件，打開 AE 的 AEUX 面板勾選中 Precomp groups，將導出的 json 拖入到 BUILD COMP 區(qū)域，或者點擊「曲別針」icon打開 json 文件。
這樣導入到 AE 里的圖層是以合成的形式展示 Sketch 里的分組。
如果在 sketch 內(nèi)，分組圖層不在同一組內(nèi)，導入 AE 后會出現(xiàn)變形和位移的情況。
如果 sketch 內(nèi)形狀圖層有投影/漸變/point type 的編輯形狀時，導入 AE 后將出現(xiàn)投影消失，漸變消失，形狀變形的情況，在遇到這種情況時，會通過導出圖片的方式處理。
導入 AE 的 AEUX 面板時如果沒有勾選 Precomp groups，多圖層導入的情況下，組內(nèi)的圖層都會生成在 AE 中的同一個合成中。
1. Detach symbols
這是一個解除 symbol 的功能，在 sketch 內(nèi)如果沒有解除 symbol，導入到 AE 里將出現(xiàn)圖形位移和變形的情況。
2. Flatten shapes
AEUX 支持布爾運算，但是在一個組中混合不同的運算符（如添加然后減去）對于Ae來說比較困難。點擊 Flatten shapes 可以合并布爾運算圖形。
3. Images to symbols
Sketch 只能導出它在畫板上看到的內(nèi)容。如果在 sketch 內(nèi)圖像的一部分超出畫板邊界，復制到 AE 內(nèi)部的圖像將出現(xiàn)位移的情況。導出前點擊 Images to symbols 不會發(fā)生被裁剪和位移的情況。
1. Come size multiplier：切換倍數(shù)
可以設置 sketch 畫板的倍數(shù)合成。
2. Auto build artboards：自動構建合成
導入前勾選此功能，在 sketch 的 AEUX面板中復制圖層后，在 AE 里不需要任何操作，它會自動復制圖層導入到創(chuàng)建合成中。
3. Convert to precomp：創(chuàng)建合成
同時選中單一圖層，可以將他們建立一個新的合成。
4. Un-Precomp group：解除合成分組
點擊可以解除合成的分組，變成單一的一個一個的圖層
5. Toggle Visibility：可以一鍵隱藏和顯示所有的父級圖層
6. Delete group layers：刪除父級圖層
雖然現(xiàn)在 AEUX 有些上面所講的功能不能支持，但是在一步步完善，希望可以幫助一些習慣用 sketch 畫插圖的設計師提高動效制作效率，減少不必要的操作步驟。
在動效制作好后，通常我們會導出 mov 然后導入 PS 里生成 gif 格式，但是 gif 會出現(xiàn)質量過低的情況，比如漸變分層，邊緣有毛邊等情況，所以由2017年 Airbnb 團隊開發(fā)的 lottie 動效可以完美的解決這些問題，而實現(xiàn) lottie 動畫需要在 AE 中安裝一款名為 Bodymovin 的插件。
Bodymovin 以 Android/iOS 原生動畫的形式在移動設備上渲染播放，在制作動效時導出 json 文件直接給到開發(fā)，可以幫助提高實現(xiàn)動效效率，同時提高動效質量。
1. 它還有很多的優(yōu)點
2. 在使用中有幾點注意
3. 所需軟件
ZXP installer
下面是一組之前做的頁面加載loading效果，開發(fā)小哥哥反饋：實現(xiàn)挺。
4. 步驟
下載ZXP installer：https://aescripts.com/learn/zxp-installer/
下載bodymovin：https://github.com/airbnb/lottie-web
下載之后，點開剛下載的 ZXP，點開頂部 file-open，打開 bodymovin插件。
當出現(xiàn)以下界面時代表已經(jīng)安裝成功。
意外情況：在用 ZXP 安裝 bodymovin插件的時候出現(xiàn)以下提示。
原因是沒有通過 Adobe Creative Cloud 下載 AE，需要重新通過 Adobe Creative Cloud 下載。
打開AE，After Effect CC – 首選項 – 常規(guī)，勾選允許腳本寫入文件和訪問網(wǎng)絡。
打開窗口 – 擴展查看是否添加成功。
調出 Bodymovin 面板，選擇需要導出的合成。
點擊你要保存的 json文件地址，點擊 Render。
點擊 Brown 載入剛導出的 json文件，檢查動效是否有誤。
這時候就可以把 json 文件給到開發(fā)，如果 AE 合成中有圖片，需要把圖片放在文件夾內(nèi)一起提供給開發(fā)，同時也會給到一個 gif文件，如果實現(xiàn)有不一樣的地方，開發(fā)可以詢問設計師。
如果想在移動端上瀏覽可以打開網(wǎng)址：https://www.lottiefiles.com/，下載安裝移動端客戶端（ios/Android）
注冊登錄成功后打開 Lottie Preview 添加 AE 里用 bodymovin 導出的 json文件。
藍藍設計( www.cqzjtgb.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。