1。前言你有没有遇到过一些设计师，他们对一些很酷的动画很着迷，喜欢根据场景设计可爱流畅的动画。但是在实际工作中，即使是开发者也觉得这些动画很棒，但是我们知道定制的动画越多，实现起来就越麻烦和费时。这有时会导致设计师和工程师之间发生冲突。由于Airbnb开发了Lottie，设计师只需要使用AfterEffects设计出最新的动画，然后通过Bodymovin插件简单的转换导出成JSON即可。高级工程师将JSON放入App项目中，就可以将动画100%带回您的产品中。2.为什么要用Lottie？Lottie是一个完整的跨平台解决方案。设计师只需要使用AfterEffects来设计动画，使用Lottic提供的Bodymovin将设计好的动画导出成JSON格式，就可以直接使用在iOS、Android和ReactNative之上，无需关心中间的实现细节。针对不同的工作角色，Lottie为您带来更简洁的工作流程。如果你是设计师，你可以充分发挥你的动画设计天赋，因为最终会100%还原。如果你是Engineer，通过简单的导入和有限的代码就可以实现设计师所需要的动画，Lottie并不臃肿。如果你是产品经理，你的产品会有炫酷的动画效果，更人性化，不会延长开发周期。总的来说，Lottie是一个优秀的项目，它可以解决很多沟通问题，并提供动画方面的解决方案。但是它还是有一些缺点：系统版本限制，Android（Api14+）和iOS（>=8.0）有不同的版本限制。不支持部分交互动画，即使导出也无法正常执行。Bodymovin插件有待完善，部分AfterEffects实现的效果无法正常导出。今天，我们就以Android工程师的角度，来看看Lottie的使用方法。这里只讲在Android下使用Lottie，如何编辑动画，如何安装插件。这些都是设计师需要关心的。对于我们来说，我们得到的是一个Lottie动画的JSON文件。我们只需要关心如何使用它。3、Android下使用Lottie3.1。Lottie可以支持也只支持Gradle进行构建配置。因此，我们只需要在build.gradle文件中做一个简单的import即可。最简单的使用方式是直接使用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的Execution，那些有兴趣的可以参考这方面的源码。3.3Lottie动画的监听Lottie作为动画，也提供了一些监听器用于监听动画的执行。比如想要监听动画的开始和结束，可以使用addAnimatorListener()方法，它接受一个Animator.AnimatorListener()接口，我们只需要实现对应的方法即可。而如果我们想监听Lottie动画的中间状态，比如执行进度等，可以使用addAnimatorUpdateListener()。控制进度是很有用的，因为有一些动画，比如一个进度条的动画，控制进度是很重要的。3.4控制Lottie动画的执行速度和时间Lottie动画导出为JSON后，动画执行的速度和时长实际上是固定的。所以如果要修改这两个参数，除了麻烦设计师使用AfterEffects重新修改后再导出，也可以使用ValueAniamtor配合setProgress()方法来实现。3.5直接使用LottieDrawableLottieAnimationView其实内部使用的是LottieDrawable，需要的可以直接使用。3.6动画中有图片有时候，我们的动画不仅仅是画出来的，还可能会用到一些图片资源。如果遇到这种情况同时使用本地资源图片，可以使用setImageAssetsFolder()设置Lottie动画中使用的图片文件夹的相对路径，并保证与输出的图片文件名相同通过bodymovin插件。持续的。如果需要加载图片，可以直接使用LottieAnimationView，无需额外处理，但如果直接使用LottieDrawable，使用后需要手动调用recycleBitmaps()回收资源。而如果我们需要自己配置图片的位置，比如从网络下载的图片，我们可以使用一个ImageAssetDelegate来支持。4.检查间隙Lottie官方提供了一个app，可以用来加载Lottie动画。它在解决问题时非常有用。建议大家如果使用Lottie，安装玩玩。Lottie.Apk需要从GooglePlay下载。如果不方便下载，可以在公众号回复“lottieapk”直接下载Apk文件。4.1性能既然是动画，就一定有性能要求。可以使用LottieApp查看动画执行的性能问题，直接看效果即可。4.2疑难解答有时，一些设计师设计的动画Lottie无法修复。遇到这种情况，可以在代码中调用getWarning()获取动画的详细警告输出。另一种方法是在官方的Lottie.App中直接加载设计师提供的JSON文件。如果有错误，右上角会有警告标记。点击查看详情。5.动画资源如果你因为各种原因没办法让设计师为你的app定制动画效果，你也可以尝试找一些网上公开的Lottie动画效果。这里推荐网站LottieFiles。LottieFiles：https://www.lottiefiles.com/LottieFiles提供了很多小动画效果，可以直接下载为JSON，也可以生成二维码，用LottieApp扫描看效果。虽然LottieFiles上的effects非常好用，但是唯一的问题是，基本上作为工程师，我们是不能编辑的，只能套用effects。6.总结在Android上使用Lottie的所有细节。这篇文章说得很清楚了。如果还有细节需要了解，只能阅读文档或者查看官方文档。LottieGithub：https://github.com/airbnb/lot...Lottie官方文档：http://airbnb.io/lottie/关于Lottie，你在使用过程中有没有遇到什么坑？可以在留言区留言一起讨论。
