Lottie调研小结

一 、简介

       Lottie 是Airbnb开源的一个面向Android、 iOS、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

二、环境搭建

• Adobe After Effects 

• Bodymovin插件

       https://github.com/airbnb/lottie-web/tree/master/build/extension

      https://aescripts.com/learn/zxp-installer/

三、兼容性

• Web

      调用Bodymovin提供的js库 — bodymovin.js。

• Android

       支持API 16及以上。

• iOS/MacOS

       支持iOS 8+和MacOS 10.10+。

• React Native

       要求Android支持库版本为26，即compileSdkVersion 26。

四、文件校验

• 在线校验

https://www.lottiefiles.com/preview
针对没有图片资源的JSON动画文件。

• 本地校验

安装官方提供的Lottie.App，从手机存储加载JSON动画文件。

如果出错，右上角会有一个 warning 的标记，点击可以查看到详情。

五、文件结构

六、解析绘制

七、性能

1. 在未开启硬件加速的情况下，帧率、内存，CPU都比属性动画差，开启硬件加速后，性能差不多。
2. 如果没有遮罩、阴影和蒙版，那么性能和内存非常好，没有bitmap创建，大部分操作都是简单的cavas绘制。
3. 在列表中使用动画，推荐使用缓存，避免内存抖动。