如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

作為視覺(jué)設(shè)計(jì)師你是否會(huì)遇到這樣的問(wèn)題，當(dāng)需要做一個(gè) loading 或者其他動(dòng)效的時(shí)候，總會(huì)或多或少的出現(xiàn)一些問(wèn)題，如何使用更輕量的 Sketch 直接將矢量圖形轉(zhuǎn)到 AE 制作動(dòng)效，如何不再受 GIF 導(dǎo)出的失真問(wèn)題困擾，如何讓開(kāi)發(fā)完美還原我們的動(dòng)效設(shè)計(jì)稿等，如果你也存在這些疑問(wèn)，那以下介紹的2款插件就可以完美的解決這些問(wèn)題。

AEUX

AEUX 是由 Google 團(tuán)隊(duì)推出的，運(yùn)用在 Sketch 和 AE 的一組插件，能將 Sketch 里的圖層以及整個(gè)畫(huà)板一鍵導(dǎo)入到 AE 里，同時(shí)能在 AE 里解決圖形分組和分層的問(wèn)題，減少導(dǎo)出圖片或者轉(zhuǎn)入 Illustrator 處理帶來(lái)的不必要的重復(fù)動(dòng)作。

以下是我做的一個(gè)簡(jiǎn)單小案例，通過(guò)此次案例將介紹怎么更好的使用這個(gè)插件：

首先在 Sketch 內(nèi)將圖層進(jìn)行分組，在多圖層的情況下，需要在前期進(jìn)行動(dòng)效構(gòu)思，根據(jù)構(gòu)思在 Sketch 里對(duì)圖層進(jìn)行分組，所做的分組將會(huì)是你在 AE 里的合成分組。

分好組后該如何導(dǎo)入才能讓兩者圖層統(tǒng)一？

方法一：直接復(fù)制選中圖層

安裝好插件后，打開(kāi) AEUX，選擇你將導(dǎo)入到 AE 里的圖層，點(diǎn)擊 Send selection to Ae，同時(shí)在AE里打開(kāi)安裝的 AEUX插件，在 BUILD COMP 區(qū)域出現(xiàn)了從 Sketch 導(dǎo)入的圖層數(shù)量，勾選 Precomp groups，點(diǎn)擊將自動(dòng)加載入 AE 合成里。

方法二：導(dǎo)出json文件

從 Sketch 的 AEUX 面板里點(diǎn)擊 Export AEUX.json 導(dǎo)出 json 文件，打開(kāi) AE 的 AEUX 面板勾選中 Precomp groups，將導(dǎo)出的 json 拖入到 BUILD COMP 區(qū)域，或者點(diǎn)擊「曲別針」icon打開(kāi) json 文件。

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

避坑指南

如果在 sketch 內(nèi)，分組圖層不在同一組內(nèi)，導(dǎo)入 AE 后會(huì)出現(xiàn)變形和位移的情況。

如果 sketch 內(nèi)形狀圖層有投影/漸變/point type 的編輯形狀時(shí)，導(dǎo)入 AE 后將出現(xiàn)投影消失，漸變消失，形狀變形的情況，在遇到這種情況時(shí)，會(huì)通過(guò)導(dǎo)出圖片的方式處理。

導(dǎo)入 AE 的 AEUX 面板時(shí)如果沒(méi)有勾選 Precomp groups，多圖層導(dǎo)入的情況下，組內(nèi)的圖層都會(huì)生成在 AE 中的同一個(gè)合成中。

Sketch的AEUX面板其他功能介紹

1. Detach symbols

這是一個(gè)解除 symbol 的功能，在 sketch 內(nèi)如果沒(méi)有解除 symbol，導(dǎo)入到 AE 里將出現(xiàn)圖形位移和變形的情況。

2. Flatten shapes

AEUX 支持布爾運(yùn)算，但是在一個(gè)組中混合不同的運(yùn)算符（如添加然后減去）對(duì)于Ae來(lái)說(shuō)比較困難。點(diǎn)擊 Flatten shapes 可以合并布爾運(yùn)算圖形。

3. Images to symbols

Sketch 只能導(dǎo)出它在畫(huà)板上看到的內(nèi)容。如果在 sketch 內(nèi)圖像的一部分超出畫(huà)板邊界，復(fù)制到 AE 內(nèi)部的圖像將出現(xiàn)位移的情況。導(dǎo)出前點(diǎn)擊 Images to symbols 不會(huì)發(fā)生被裁剪和位移的情況。

AE的AEUX面板其他功能介紹

1. Come size multiplier：切換倍數(shù)

可以設(shè)置 sketch 畫(huà)板的倍數(shù)合成。

2. Auto build artboards：自動(dòng)構(gòu)建合成

導(dǎo)入前勾選此功能，在 sketch 的 AEUX面板中復(fù)制圖層后，在 AE 里不需要任何操作，它會(huì)自動(dòng)復(fù)制圖層導(dǎo)入到創(chuàng)建合成中。

3. Convert to precomp：創(chuàng)建合成

同時(shí)選中單一圖層，可以將他們建立一個(gè)新的合成。

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

點(diǎn)擊可以解除合成的分組，變成單一的一個(gè)一個(gè)的圖層

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

6. Delete group layers：刪除父級(jí)圖層

雖然現(xiàn)在 AEUX 有些上面所講的功能不能支持，但是在一步步完善，希望可以幫助一些習(xí)慣用 sketch 畫(huà)插圖的設(shè)計(jì)師提高動(dòng)效制作效率，減少不必要的操作步驟。

Bodymovin

在動(dòng)效制作好后，通常我們會(huì)導(dǎo)出 mov 然后導(dǎo)入 PS 里生成 gif 格式，但是 gif 會(huì)出現(xiàn)質(zhì)量過(guò)低的情況，比如漸變分層，邊緣有毛邊等情況，所以由2017年 Airbnb 團(tuán)隊(duì)開(kāi)發(fā)的 lottie 動(dòng)效可以完美的解決這些問(wèn)題，而實(shí)現(xiàn) lottie 動(dòng)畫(huà)需要在 AE 中安裝一款名為 Bodymovin 的插件。

Bodymovin 以 Android/iOS 原生動(dòng)畫(huà)的形式在移動(dòng)設(shè)備上渲染播放，在制作動(dòng)效時(shí)導(dǎo)出 json 文件直接給到開(kāi)發(fā)，可以幫助提高實(shí)現(xiàn)動(dòng)效效率，同時(shí)提高動(dòng)效質(zhì)量。

1. 它還有很多的優(yōu)點(diǎn)

• 它可以支持 Android、iOS平臺(tái)；
• 導(dǎo)出的文件體積小，方便開(kāi)發(fā)使用；
• 實(shí)現(xiàn)效果佳，可以支持漸變等效果。

2. 在使用中有幾點(diǎn)注意

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

3. 所需軟件

ZXP installer

• LottieFiles（移動(dòng)版）
• 插件：bodymovin

下面是一組之前做的頁(yè)面加載loading效果，開(kāi)發(fā)小哥哥反饋：實(shí)現(xiàn)挺。

4. 步驟

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

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

下載之后，點(diǎn)開(kāi)剛下載的 ZXP，點(diǎn)開(kāi)頂部 file-open，打開(kāi) bodymovin插件。

當(dāng)出現(xiàn)以下界面時(shí)代表已經(jīng)安裝成功。

意外情況：在用 ZXP 安裝 bodymovin插件的時(shí)候出現(xiàn)以下提示。

原因是沒(méi)有通過(guò) Adobe Creative Cloud 下載 AE，需要重新通過(guò) Adobe Creative Cloud 下載。

打開(kāi)AE，After Effect CC – 首選項(xiàng) – 常規(guī)，勾選允許腳本寫(xiě)入文件和訪問(wèn)網(wǎng)絡(luò)。

打開(kāi)窗口 – 擴(kuò)展查看是否添加成功。

調(diào)出 Bodymovin 面板，選擇需要導(dǎo)出的合成。

點(diǎn)擊你要保存的 json文件地址，點(diǎn)擊 Render。

點(diǎn)擊 Brown 載入剛導(dǎo)出的 json文件，檢查動(dòng)效是否有誤。

這時(shí)候就可以把 json 文件給到開(kāi)發(fā)，如果 AE 合成中有圖片，需要把圖片放在文件夾內(nèi)一起提供給開(kāi)發(fā)，同時(shí)也會(huì)給到一個(gè) gif文件，如果實(shí)現(xiàn)有不一樣的地方，開(kāi)發(fā)可以詢問(wèn)設(shè)計(jì)師。

如果想在移動(dòng)端上瀏覽可以打開(kāi)網(wǎng)址：https://www.lottiefiles.com/，下載安裝移動(dòng)端客戶端（ios/Android）

注冊(cè)登錄成功后打開(kāi) Lottie Preview 添加 AE 里用 bodymovin 導(dǎo)出的 json文件。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。