站在 Android 开发的角度，聊聊 Airbnb 的 Lottie！！！

1、前言

你有没有赶上一些设计师，对一些酷炫的动画着迷，喜欢根据场景设计出可爱而流畅的动画。可是在实际工做中，哪怕开发人员也以为这些动画很是的棒，可咱们知道，越是定制化的动画，实现起来将会越麻烦和耗时。这有时候就会引起设计师和工程师的矛盾。

而自从 Airbnb 开发出 Lottie 以后，设计师只须要使用 After Effects 设计出完美的动画，而后经过 Bodymovin 插件进行简单的转换和导出成 JSON，最后工程师将 JSON 放入 App 项目中，就能够将动画 100% 还原到你的产品中。

2、为何要用 Lottie？

Lottie 是一套跨平台的完整解决方案，设计师只须要使用 After Effectes 设计出动画以后，使用 Lottic 提供的 Bodymovin 将设计好的动画导出成 JSON 格式，就能够直接运用在 iOS、Android 和 React Native之上，无需关心中间的实现细节。

对于不一样的工做角色，Lottie 给你带来的都是更简洁的工做流。

• 若是你是 Designer，你能够充分发挥你的动画设计天分，由于它们最终会被 100% 的还原。
• 若是你是 Engineer，你能够经过简单的导入和有限的代码，就能够实现设计师要求的动画，而且 Lottie 并不臃肿。
• 若是你是 Product Manager，你的产品将具备更人性化的酷炫动画，而这并不会带来开发周期的延长。

总体来讲，Lottie 是一个优秀的项目，它能解决不少关于动画上的沟通问题和提供解决方案。可它依然有一些不足的地方：

1. 系统版本限制，Android（Api 14+） 和 iOS(>=8.0) 都有不一样的版本限制。
2. 有一些交互动画，不被支持，哪怕导出了也没法被正常执行。
3. Bodymovin 插件还有待完善，有些 After Effects 实现的效果，没法被正常导出。

而今天，咱们站在一个 Android 工程师的角度，来看看如何使用 Lottie。这里只聊 Android 下使用 Lottie，如何编辑动画，如何安装插件，这些都是设计师须要关心的，对咱们而言，拿到的就是一个 Lottie 动画的 JSON 文件，咱们只须要关心如何使用它。

3、在 Android 下使用 Lottie

3.1 开始使用

Lottie 能够支持而且也是仅支持 Gradle 进行构建配置，所以，咱们只须要在 build.gradle 文件中进行简单的导入就行了。

最简单的使用方式是直接使用 LottieAnimationView ，LottieAnimationView 直接继承自 AppCompatImageView 。

只须要提早将动画的 JSON 文件，放在 app/src/main/assets 目录下，在 Layout 布局文件中，能够直接使用。

它支持几个属性：

• lottie_fileName : 播放动画的 json 文件。
• lottie_loop：是否循环播放，默认为 false。
• lottie_autoPlay：是否加载完成以后，自动播放，默认为 false。

固然，你也可使用逻辑代码去控制 Lottie 动画的播放，使用起来也很是的简单。

这个方法会去加载 JSON 文件，并解析动画，以后在子线程中开始异步渲染动画。

3.2 加载其余来源的 Lottie

咱们的 Lottie 动画的 JSON 能够从任何地方加载，这里就须要使用到 LottieComposition.Factory 这个类去加载不一样来源的 JSON 文件。在这个 Factory 中，提供了不少 fromXxx() 的方法，用于加载动画的 JSON 。

一个比较经常使用的方式，例如咱们从一个 JSONObject 中，加载 Lottie 动画。

fromXxx() 方法，会返回一个 Cancellable 接口，标识它是一个可被取消的方法，若是有须要，能够调用它的 cancel() 方法。

Lottie 的动画加载器，看着有不少 fromXxx() 方法，其实最终指向的都是 FileCompositionLoader 和 JsonCompositionLoader ，这两个加载器，都是继承自 AsyncTask 的，因此 cancel() 方法其实就是取消的这个 AsyncTask 的执行，有兴趣的能够查阅这方面的源码。

3.3 Lottie 动画的监听

Lottie 做为一个动画，也是提供了一些监听器用于监听动画执行的状况的。

例如，想要监听动画的开始结束等状态，可使用 addAnimatorListener() 方法，它接受一个 Animator.AnimatorListener() 接口，咱们只须要实现对应的方法就好了。

而若是咱们想要监听 Lottie 动画的中间状态，例如执行的进度等等，可使用 addAnimatorUpdateListener()。

控制进度很是的有用，由于有一些动画，例如就是一个进度条的动画，控制进度就显得很是重要了。

3.4 控制 Lottie 动画执行的速度和时间

Lottie 动画，在导出成 JSON 以后，其实动画执行的速度和时长，都是已经固定了的。因此若是想要修改这两个参数，除了麻烦设计师使用 After Effects 从新修改以后再导出以外，还可使用 ValueAniamtor 配合 setProgress() 方法来实现。

3.5 直接使用 LottieDrawable

LottieAnimationView 其实内部使用的是 LottieDrawable ，若是有须要你也能够直接使用它。

3.6 动画里有图片

有时候，咱们的动画不只仅是画上去的，还有可能会使用到一些图片资源。若是遇到这样的状况，同时使用的是本地资源图片，可使用 setImageAssetsFolder() 设置一个 Lottie 动画中使用到的图片文件夹的相对路径，并确保他们和 bodymovin 插件输出的用到的图片文件名称，保持不变。

若是你须要加载图片，你使用 LottieAnimationView 你能够很省心，不须要额外处理，可是若是你直接使用 LottieDrawable 的话，使用完成以后，须要手动调用 recycleBitmaps() 进行资源的回收。

而假如咱们须要本身配置图片的位置，例如是从网络中下载的图片，可使用一个 ImageAssetDelegate 来支持。

4、查缺补漏

Lottie 官方提供了一个 App，能够用于加载一个 Lottie 的动画，在排查问题方面，很是有用，建议若是使用 Lottie 的话，最好安装把玩一下。Lottie.Apk 须要去 Google Play 上下载，不方便下载的能够在公众号回复 "lottieapk"，直接下载 Apk 文件。

4.1 性能

既然是动画，确定有性能的要求。能够借助 Lottie App，来看看动画执行的性能问题，直接看效果就行了。

4.2 故障排除

有时候，设计师设计的动画，有些效果是没法被 Lottie 还原的。遇到这样的状况，能够在代码中调用 getWarning() 获取动画的警告详细输出。

还有一个方法是直接在官方提供的 Lottie.App 中，去加载设计师提供的 JSON 文件，若是出错，右上角会有一个 warning 的标记，点击能够查看到详情。

5、动画资源

若是你由于各类缘由，没有办法专门由一个设计师来为你的 App 定制动画效果，你也能够尝试找找线上公开的一些 Lottie 的动画效果，这里推荐使用 LottieFiles 这个网站。

LottieFiles:

https://www.lottiefiles.com/

LottieFiles 提供了不少小的动画效果，而且能够直接下载成 JSON ，或者生成二维码，可供 Lottie App 扫描看效果。

LottieFiles 上的效果，虽然很是的好用，惟一的问题就是基本上，咱们做为工程师是没法编辑的，因此只能去套用效果。

6、小结

Android 使用 Lottie 的全部细节，本文已经说清楚了，还有细节须要了解，就只能阅读文档，或者查看官方文档了。

Lottie Github：

https://github.com/airbnb/lottie-android

Lottie 官方文档：

http://airbnb.io/lottie/

关于 Lottie ，你在使用的过程当中，有没有遇到什么坑？能够在留言区留言一块儿讨论。

今天在承香墨影公众号的后台，回复『成长』。我会送你一些我整理的学习资料，包含：Android反编译、算法、设计模式、虚拟机、Linux、Kotlin、Python、爬虫、Web项目源码。

推荐阅读：

• Drawable 的这些经常使用小技巧，提升开发效率！
• Android 软键盘的显示和隐藏，这样操做就对了
• Android 反编译利器，jadx 的高级技巧
• 关于如何编写 Clean Code 的 6 个简单技巧
• 手写你的第一个 Dalvik 版的 HelloWorld ！