一、放入AE中的圖層最好是圖片格式，如果是AI或者PSD格式圖層，在mac系統會出現勾選了“保留圖片名稱”選項，但是無法輸出image文件夾，演示的html會出現圖片丟失

mac系統AE圖層為AI或PSD格式，勾選“保留圖片名稱”選項，輸出無圖片

勾選“保留圖片名稱”選項，輸出無圖片html

勾選“保留圖片名稱”選項，輸出無image文件夾

如若不勾選“保留圖片名稱”選項，插件導出的圖片資源會自動命名為img_0至img_N，而如果產品中之前有同樣的動效圖片素材，放入該動效后，資源會覆蓋。

默認命名，資源會覆蓋同樣命名的

所以，我們在AE文件中的圖層需要全英文命名，且如若是在mac系統上，AE中的圖層最好是圖片。如果是AI或是PSD格式，需要手動將圖層創建為形狀，但是創建形狀后圖層顏色丟失，需要重新設置顏色。

故mac系統上建議使用圖片作為圖層。

(經驗證，windows系統不存在這個問題，不管是AI圖層還是PSD圖層，勾選“保留圖片名稱”選項，導出.ai或是.PSD格式的資源，只要Json和素材能對應上，在開發實現上就沒有問題)。

AI圖層創建形狀

AI圖層創建形狀后顏色丟失

image文件后綴

Json資源后綴

AI和PSD圖層

html演示無問題

二、小程序實現APP端的動效，同樣可使用Lottie庫，使用bodymovin插件導出Json格式，值得注意的地方：資源在插件輸出時要轉化成base64格式，否則無法在小程序引入圖片。

這樣輸出的文件會沒有了image文件夾，圖片資源一并存到了Json中，Json體積多大，動畫在小程序的體積就是多大。

一個小細節是：壓縮圖片選項不管設置高還是低，Json的體積不會有太大的變化，所以保持默認80就OK。

小程序輸出Json需要將圖片資源轉換為base64格式

三、Lottie庫AE特性支持要點：形狀、填充、基本屬性變換可支持，蒙版部分效果不支持，考慮到多平臺兼容，動畫要求簡單，輸出時簡化幀數

Lottie支持的AE特性列表官方文檔：https://airbnb.io/lottie/#/supported-features

總結

以上是生活随笔為你收集整理的bodymovin导出没有html5,Bodymovin导出Json文件避坑指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。