Airbnb开源项目Lottie碉堡了

开发 开发工具
Airbnb 还提供了一个 sample apk,考虑到部分人在 Google Play 上下载 apk 有些困难,我也贴心的把 sample apk 下载下来了,公众号 AndroidDeveloper 后台回复「lottie」关键字获取。

新年***天上班,没想到就立春了,俗话说,一年之计在于春,全新的 17 年开始啦,来,收拾下心情,投入到工作中,撸起袖子,就是干!

就在前几天,Airbnb 开源了一个项目叫做 Lottie,我个人觉得这个项目简直碉堡了!

动画相信大家都不陌生,在 App 开发过程中,适当的使用动画可以提升用户体验,使我们的产品锦上添花,对于一些简单的动画,我们很容易就能实现,但是对于一些比较复杂的动画,实现起来就比较麻烦了,比如下图的一些动画:

怎么样?这些可不是简单的移动、缩放、旋转就搞得定的,可能有些人思考了之后大概有以下实现思路:

  • 使用 Gif,这种方式当然可行,但是使用 Gif 占用空间较大,而且需要为各种屏幕尺寸、分辨率做适配,因为 Android 没有提供原生 Gif 的 api 支持,所以这种方案还会遇到兼容性问题;
  • 使用帧动画,这种方式还不如 Gif,一般来说使用帧动画占用空间比 Gif 还要大的多,而且一样要做多屏幕分辨率的适配,不过一般不会遇到兼容性问题;
  • 使用视频,这种方式当然可以,但是一般来说宣传片才用的上视频,一般的动画远不需要用视频才能实现的,未免有些大材小用了,而且占用空间依然很大。

就没有更好的实现方式了么?

当然有,Android 5.x 之后提供了对 SVG 的支持,通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画,但是兼容性是一个问题,当然这个可以通过一些第三方库来解决,不过整个实现流程非常麻烦,每次全新实现一个动画都得重头来过,最最关键的是,如果一个公司下的 App,iOS 也要实现一套一样的动画,资源的占用与开发成本就显得过大了。

而 Airbnb 开源的这个项目***的解决以上难题,我们来看下整个流程是什么样的。

假设我们要做一个引导页面的欢迎动画,这个一般设计师会用Adobe旗下的After Effects(简称AE)来做个动画出来,设计师用AE做个动画比工程师用代码去实现一个动画要快的多的多,调整起来也很方便,之后AE上有一款插件叫做Bodymovin(https://github.com/bodymovin/bodymovin),这个插件也比较屌,可以直接根据AE上的动画文件导出json文件,这个json文件描述了该动画的一些关键点的坐标以及运动轨迹,之后我们在项目中引用Lottie开源库,在布局文件中简单的加上这么一句就***的实现了。

或者代码中这样使用:

值得一提的是,我们的 hello-world.json 文件只需要放在 app/src/main/assets 目录下就 ok 了。

当然,还有更多的用法,比如给动画添加事件,比如描述动画的 json 文件可以远程更新下载到本地,这样就可以不动声色的定期更新你的动画了。

有了这个库,我们可以充分发挥我们的想象力,很简单方便的就实现了一套很酷炫的动画,最重要的是,这个库是跨平台的,支持 Android、iOS 以及 ReactNative,共用一套 json 动画描述文件,简直了!

其实Facebook前段时间开源了一个类似的库叫做Keyframes(https://github.com/facebookincubator/Keyframes),也是跨平台的,但是Lottie比Keyframes支持的特性更多,而且据Airbnb官方博客介绍,以后会让这个库支持更多的特性与功能,不得不说,真乃良心!

***,这个库的开源地址在这里:

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

iOS: https://github.com/airbnb/lottie-ios

ReactNative: https://github.com/airbnb/lottie-react-native

最***,Airbnb 还提供了一个 sample apk,考虑到部分人在 Google Play 上下载 apk 有些困难,我也贴心的把 sample apk 下载下来了,公众号 AndroidDeveloper 后台回复「lottie」关键字获取。

【本文为51CTO专栏作者“stormzhang”原创稿件,转载请联系原作者(微信公众号:googdev)】

戳这里,看该作者更多好文

责任编辑:武晓燕 来源: 51CTO专栏
相关推荐

2021-03-29 10:37:35

开源技术 开发

2017-12-15 14:20:24

AndroidAirbnbLottie

2017-12-15 11:09:05

设计师LottieAndroid

2021-01-26 10:59:52

开源技术 数据

2014-09-30 16:02:09

维盟路由公测

2016-12-20 13:35:52

谷歌开源项目

2017-12-01 19:02:33

Airbnb大数据平台

2012-10-23 09:56:26

AmazonEC2云计算

2013-07-17 10:16:57

Github项目许可证

2022-10-21 08:17:06

开源项目闭源

2018-02-25 09:17:19

Google 开源项目

2013-07-31 09:20:07

大数据引擎云计算个性化搜索

2012-07-20 10:38:25

Entity FramEF

2020-05-19 10:13:45

Java开发代码

2024-05-20 08:35:00

模型定理

2021-01-07 10:15:55

开发 Java开源

2021-07-08 11:47:02

Saleor开源电子商务平台

2012-08-17 13:49:37

小米2雷军

2016-10-12 09:10:56

大数据Airbnb
点赞
收藏

51CTO技术栈公众号