站在 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 是一个优秀的项目,它能解决很多关于动画上的沟通问题和提供解决方案。可它依然有一些不足的地方:
- 系统版本限制,Android(Api 14+) 和 iOS(>=8.0) 都有不同的版本限制。
- 有一些交互动画,不被支持,哪怕导出了也无法被正常执行。
- 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:
LottieFiles 提供了很多小的动画效果,并且可以直接下载成 JSON ,或者生成二维码,可供 Lottie App 扫描看效果。
LottieFiles 上的效果,虽然非常的好用,唯一的问题就是基本上,我们作为工程师是无法编辑的,所以只能去套用效果。
六、小结
Android 使用 Lottie 的所有细节,本文已经说清楚了,还有细节需要了解,就只能阅读文档,或者查看官方文档了。
Lottie Github:
https://github.com/airbnb/lottie-android
Lottie 官方文档:
关于 Lottie ,你在使用的过程中,有没有遇到什么坑?可以在留言区留言一起讨论。
今天在承香墨影公众号的后台,回复『成长』。我会送你一些我整理的学习资料,包含:Android反编译、算法、设计模式、虚拟机、Linux、Kotlin、Python、爬虫、Web项目源码。
推荐阅读:
- Drawable 的这些常用小技巧,提高开发效率!
- Android 软键盘的显示和隐藏,这样操作就对了
- Android 反编译利器,jadx 的高级技巧
- 关于如何编写 Clean Code 的 6 个简单技巧
- 手写你的第一个 Dalvik 版的 HelloWorld !
站在 Android 开发的角度,聊聊 Airbnb 的 Lottie!!!的更多相关文章
- Android开发需要了解的 IM 知识
引言 即便在通讯如此发达的今天,IM 也依然是诸多场景下非常重要的基础能力.因此做为 一名 Android 开发,不可避免的会遇到一些IM 相关的需求或问题.本文以一个Android开发的角度来讲述I ...
- [Android] Android开发优化之——从代码角度进行优化
通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点,就 ...
- 解析Android开发优化之:从代码角度进行优化的技巧
下面我们就从几个方面来了解Android开发过程中的代码优化,需要的朋友参考下 通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻辑,但是性能不一定是最优化的.一般来说 ...
- 站在巨人的肩膀上学习Android开发
我们知道,一開始最好的学习方法是模仿,尤其是模仿巨人. 那说到Android开发的模仿自然就是分析并研究主流程序的布局.实现方法.进而提升自己的技术. 第一招----逆向project 要分析&quo ...
- android开发利器--站在巨人肩膀上前行
本文主要介绍有助于android开发的三方平台和站点. 一:开发阶段 1:SVN(一个开放源码的版本号控制系统) 团队开发没有server,代码管理就没那么方便了,推荐taocode阿里开源站点,方便 ...
- Android 开发佳站3
eclipse 某些java文件乱码 摘要: [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/archive/2013/04/24/3040219.h ...
- Android开发优化之——从代码角度进行优化
通常我们写程序,都是在项目计划的压力下完成的,此时完成的代码可以完成具体业务逻 辑,但是性能不一定是最优化的.一般来说,优秀的程序员在写完代码之后都会不断的对代码进行重构.重构的好处有很多,其中一点, ...
- 2016 校招, Android 开发,一个本科应届的坎坷求职之路(转)
转载出处:http://www.nowcoder.com/discuss/3244?type=2&order=0&pos=1&page=1 和大多数的面经不同,我不是大牛,手头 ...
- Android开发App工程结构搭建
本文算是一篇漫谈,谈一谈关于android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构. 关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的角 ...
随机推荐
- common lisp的宏的工作模式
(defmacro our-expander (name) ‘(get ,name ’expander))(defmacro our-defmacro (name parms &body bo ...
- Ionic3 遇到的一些错误-Error: Cannot find module 'reflect-metadata'
E:\Projects\ionic\myApp5>ionic serve Error: Cannot find module 'reflect-metadata' 解决方法: npm insta ...
- Linux下Git安装、配置
安装 首先查看下有没有安装过 输入 git,出现以下的,就说明安装过了. 否则, 执行命令:sudo apt-get install git 进行安装 安装好之后,还需要执行命令: git co ...
- 树莓派链接WiFi设置
树莓派摆脱网线的束缚 在看这篇文章之前,请确保自己树莓派OS已经正常安装且已经连接网线,然后准备一个无线网卡,开始实现我们的树莓派摆脱网线的束缚吧 ! -_- 一. 安装网卡驱动 1. ...
- .net ef core 领域设计代码转换(上篇)
一.前言 .net core 2.0正式版已经发布几个月了,经过研究,决定把项目转移过来,新手的话可以先看一些官方介绍 传送门:https://docs.microsoft.com/zh-cn/dot ...
- Velocity(4)——引入指令和#Parse 指令
#Include和#Parse都是用于将本地文件引入当前文件的指令,而且被引入的文件必须位于TEMPLATE_ROOT.这两者之间有一些区别. #Include 被#Include引入的文件,其内容不 ...
- Jdbc访问数据库篇
一万年太久,只争朝夕 What JDBC 上部 JDBC(Java DataBase Connectivity)Java 数据库连接,主要提供编写 Java 数据库应用程序的 API 支持 java. ...
- Spring JDBC 示例
在使用普通的 JDBC 数据库时,就会很麻烦的写不必要的代码来处理异常,打开和关闭数据库连接等.但 Spring JDBC 框架负责所有的低层细节,从开始打开连接,准备和执行 SQL 语句,处理异常, ...
- shell ping一个IP,延时大于5,输出延时大于5s,打印输出
# ping一个IP,延时大于5,输出延时大于5s,打印输出 #!/bin/bash ip=$* echo $ip num=`ping -c 10 ${ip}|grep icmp_seq|awk ' ...
- 关于如何获取移动端 touchmove 事件中真正触摸点下方的元素
移动端的touchstart, touchmove, touchend三个事件,点击元素并拖动时,获取到了touchmove事件, 但是event.touches[0].target所指向的元素却是t ...