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