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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容