bodymovin导出没有html5,Bodymovin导出Json文件避坑指南

一、放入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