AE動畫導(dǎo)出json插件Bodymovin

Bodymovin插件是一款可以幫你把AE上做好的動畫導(dǎo)出為json文件的插件，導(dǎo)出的json文件可以以Android/iOS原生動畫的形式在移動設(shè)備上渲染播放。在制作動效時導(dǎo)出 json 文件直接給到開發(fā)，可以幫助提高實現(xiàn)動效效率，同時提高動效質(zhì)量。

插件優(yōu)點(diǎn)：

它可以支持 Android、iOS平臺；

導(dǎo)出的文件體積小，方便開發(fā)使用；

實現(xiàn)效果佳，可以支持漸變等效果。

使用注意：

在使用前期，這種方法是否適合你現(xiàn)在所做的動效，lottie 是針對矢量動畫開發(fā)的，不太適合圖片過多的情況，圖片過多會增加文件負(fù)荷，所以最好是將圖片轉(zhuǎn)化為路徑動畫。

在 AE 里導(dǎo)入到 Lottie 的圖層不能識別矢量漸變。

不能支持外置插件的效果，比如粒子、光效等。

需要與前端開發(fā)溝通，他們是否愿意使用。

導(dǎo)出給開發(fā)的文件中需要有完整視頻參考，開發(fā)可以通過完整視頻知道 loading 位置和效果，同時如果出現(xiàn) json 導(dǎo)出錯誤的情況，開發(fā)可以查看，遇到不一樣的地方可以詢問設(shè)計師。

開發(fā)完成后需要走查，看是否與你預(yù)期一致。

安裝方法：

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

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

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

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

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

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

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

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

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

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

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

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