AE動(dòng)畫(huà)導(dǎo)出json插件Bodymovin

Bodymovin插件是一款可以幫你把AE上做好的動(dòng)畫(huà)導(dǎo)出為json文件的插件，導(dǎo)出的json文件可以以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ì)量。

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

它可以支持 Android、iOS平臺(tái)；

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

實(shí)現(xià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ù)期一致。

安裝方法：

下載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ì)師。