一. Lottie 是什么
首先这个库是做什么的？
通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成一个 json 文件，Lottie 实现了 Android/iOS/React Native 三个平台对该 json 文件的解析和渲染。
可能看到这里你该有疑问了，那 Bodymovin 插件从何而来？
bodymovin从项目介绍上看是一个个人库，它的主要功能是将 AE 导出的动画在 Web 端执行。所以 Airbnb 做的主要工作是将该项目扩展到移动端。
二. 优点
它最大的优点是提供了一套完整的跨平台的动画实现工作流。
试想一下，以往要实现一个动画，我们需要多端各自实现且动画的复杂度受时间成本和开发者能力的约束。现在，通过这套流程我们可以将 AE 中的动画很轻松得在 web 端、移动端显示出来，这大大提高了动画的开发效率及减轻工作量。
其次，相对于类似的实现方案GIF、手写动画、帧动画而言，这个方案更为轻量，性能和存储上都更佳
从代码上看，Android 端的实现是基于 Drawable、iOS 端是基于 Layer —— 最终都是对 canvas 的操作，中间除去解析 json 外，基本无耗费性能的行为。（官方文档有提到，masks 和 mattes 动画较为耗费性能，原因是需要额外的 Bitmap 辅助，这点需注意）
而存储上，动画由 json 文件描述，占用空间不多。
三. 适用场景
1.启动(splash)动画：典型场景是APP logo动画的播放
2.上下拉刷新动画：所有APP都必备的功能，利用 Lottie 可以做的更加简单酷炫了
3.加载(loading)动画：典型场景是网络请求的loading动画
4.提示(tips)动画：典型场景是空白页的提示
5.按钮(button)动画：典型场景如switch按钮、编辑按钮、播放按钮等按钮的切换过渡动画
6.礼物(gift)动画：典型场景是直播类APP的高级动画播放
7.视图转场动画
四. 仍然存在的问题
1. Bodymovin 插件待完善，仍然有部分 AE 效果无法成功导出；
2. Lottie 对 json 文件的支持待完善，目前有部分能成功导出成 json 文件的效果在移动端上无法很好的展现；
3. 目前不支持文字，所有文字必须转成矢量图才能正常展现动画；
4. 动画无法被编辑，即移动端无法更改远端下载到本地的动画；
5.安卓需要API 16及以上，iOS需要iOS8及以上。
demo
下拉刷新demo
网友评论