站在 Android 开发的角度,聊聊 Airbnb 的 Lottie!!!

一、前言

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

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

二、为什么要用 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 文件,我们只需要关心如何使用它。

三、在 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 来支持。

四、查缺补漏

Lottie 官方提供了一个 App,可以用于加载一个 Lottie 的动画,在排查问题方面,非常有用,建议如果使用 Lottie 的话,最好安装把玩一下。Lottie.Apk 需要去 Google Play 上下载,不方便下载的可以在公众号回复 "lottieapk",直接下载 Apk 文件。

4.1 性能

既然是动画,肯定有性能的要求。可以借助 Lottie App,来看看动画执行的性能问题,直接看效果就好了。

4.2 故障排除

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

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

五、动画资源

如果你因为各种原因,没有办法专门由一个设计师来为你的 App 定制动画效果,你也可以尝试找找线上公开的一些 Lottie 的动画效果,这里推荐使用 LottieFiles 这个网站。

LottieFiles:

https://www.lottiefiles.com/

LottieFiles 提供了很多小的动画效果,并且可以直接下载成 JSON ,或者生成二维码,可供 Lottie App 扫描看效果。

LottieFiles 上的效果,虽然非常的好用,唯一的问题就是基本上,我们作为工程师是无法编辑的,所以只能去套用效果。

六、小结

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

Lottie Github:

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

Lottie 官方文档:

http://airbnb.io/lottie/

关于 Lottie ,你在使用的过程中,有没有遇到什么坑?可以在留言区留言一起讨论。

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

推荐阅读:

时间: 2024-10-12 22:37:57

站在 Android 开发的角度,聊聊 Airbnb 的 Lottie!!!的相关文章

android开发利器--站在巨人肩膀上前行

本文主要介绍有助于android开发的三方平台和网站. 一:开发阶段 1:SVN(一个开放源代码的版本控制系统) 团队开发没有服务器,代码管理就没那么方便了,推荐taocode阿里开源网站,方便团队开发,不用安装客户端,方便快捷. 2:服务器(一个管理资源并为用户提供服务的计算机) 团队开发初期,资金有限没服务器?阿里云免费使用6个月,新浪云也可助你一臂之力. 3:android论坛(在线答疑,资源共享,分享心得) 没有名师指路?EOE论坛追求提问没有0回复,解决问题好帮手;CSDN最大的中国I

站在巨人的肩膀上学习Android开发

我们知道,一开始最好的学习方法是模仿,尤其是模仿巨人.那说到Android开发的模仿自然就是分析并研究主流程序的布局.实现方法,进而提升自己的技术. 第一招----逆向工程 要分析"巨人"们的软件,自然免不了逆向工程,即将APK程序转化为我们可以看的懂得源码.这个google官方已经帮我们做好了工具,apktool就是一款很好的逆向工具. 下载地址为:http://pan.baidu.com/s/1kTqRhaR 我们以分析微信为例来说明这个工具的使用: 你只需执行如下命令,即完成了反

[Android] Android开发优化之——从代码角度进行优化

通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就是对代码进行优化,提高软件的性能.下面我们就从几个方面来了解Android开发过程中的代码优化. 1)静态变量引起内存泄露 在代码优化的过程中,我们需要对代码中的静态变量特别留意.静态变量是类相关的变量,它的生命周期是从这个类被声明,到这个类彻底被垃圾回收器回收才会被销毁.所以,一般情况下,静态变量

解析Android开发优化之:从代码角度进行优化的技巧

下面我们就从几个方面来了解Android开发过程中的代码优化,需要的朋友参考下 通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代 码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就是对代码进行优化,提高软件的性能.下面我们就从几个方面来了解Android开发过程 中的代码优化. 1)静态变量引起内存泄露 在代码优化的过程中,我们需要对代码中的静态变量特别留意.静态变量是类相关的变量,它的生命周期

Android开发优化之——从代码角度进行优化

通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻 辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就是对代码进行优化,提高 软件的性能.下面我们就从几个方面来了解Android开发过程中的代码优化. 1)静态变量引起内存泄露在 代码优化的过程中,我们需要对代码中的静态变量特别留意.静态变量是类相关的变量,它的生命周期是从这个类被声明,到这个类彻底被垃圾回收器回收才会被销 毁.所以,一般情况下,静

Android开发软件架构思考以及经验总结

前言 架构设计,到底是什么呢?基于这段时间的学习和自己的一些思考,我认为架构是基于产品和技术所达成的一种共识.我不是专业的架构师,也不是经验老道的开发者.本文目的有三,一是整理这段时间的架构学习和思考以及总结这一年的开发经验教训,二是希望能够与各位朋友探讨移动端App的架构设计,三是希望我们每一个应用开发者能够拥有架构的意识.个人的水平有限,文中如果不当之处,还希望批评指正. 知识大纲 一.萌芽 二.初识架构 1.阅读<架构之美>之论架构 2.分析行业内各个APP的架构演进 (1)架构为什么需

Android开发艺术探索——第一章:Activity的生命周期和启动模式

Android开发艺术探索--第一章:Activity的生命周期和启动模式 怀着无比崇敬的心情翻开了这本书,路漫漫其修远兮,程序人生,为自己加油! 一.序 作为这本书的第一章,主席还是把Activity搬上来了,也确实,和Activity打交道的次数基本上是最多的,而且他的内容和知识点也是很多的,非常值得我们优先把他掌握,Activity中文翻译过来就是"活动"的意思,但是主席觉得这样翻译有些生硬,直接翻译成"界面"可能更好,的确,Activity主要也是用于UI效

Android开发App工程结构搭建

本文算是一篇漫谈,谈一谈关于android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构.      关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的角度,看到整齐的代码,优美的分层总是一种舒服的享受的.      从艺术的角度看,其实我们是在追求一种美. 本文先分析几个当今比较流行的android软件包,最后我们汲取其中觉得优秀的部分,搭建我们自己的通用android工程模板.      1. 微盘      2. 久忆日记      3.网易新

Android开发问题笔记

1.Toolbar问题:最低版本15,必须使用support,才能使用Toolbar,Toobar是5.0引入的 2.BottomTab:这个用TabLayout解决了 3.后端API最好采用一个成熟的框架来做,比如Restful的Django-Rest-Framework,既可以简化IT设施层.又可以复用成熟的设计: 4.最后还是用Android Studio生成向导的TabLayout+ViewPager+PlaceFragment解决问题. 5.官网的Best Practice值得参考借鉴