这个项目碉堡了

原创 2017年02月03日 22:15:13

新年第一天上班,没想到就立春了,俗话说,一年之计在于春,全新的 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,这个插件也比较屌,可以直接根据 AE 上的动画文件导出 json 文件,这个 json 文件描述了该动画的一些关键点的坐标以及运动轨迹,之后我们在项目中引用 Lottie 开源库,在布局文件中简单的加上这么一句就完美的实现了。

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="hello-world.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />

或者代码中这样使用:

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);

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

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

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

其实 Facebook 前段时间开源了一个类似的库叫做 Keyframes,也是跨平台的,但是 Littie 比 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 下载下来了,公众号 「googdev」 后台回复「lottie」关键字获取。

本文原创发布于微信公众号「googdev」,编程、职场、思维,关注并回复关键字「GitHub」、「Android」、「Python」、「Java」、「AI」等获取免费学习资料。

版权声明:本文已在我的公众号 stormzhang 原创首发,转载请务必注明出处!

AE 以及 Bodymovin的安装

原文地址: https://jfson.github.io/2017/03/06/AE-Bodymovin-environment/ AE安装(mac)AE 下载及安装地址下载完成后,打开dmg 文件...

洋葱头急速浏览器--tor

我们大多数人都在上网方面花费很多时间。上网使用的应用程序主要是浏览器,更确切的说是一个Web浏览器。我们在网络上的大部分活动要以客户端/服务器的方式登录,这个过程会包括IP地址、地理信息、搜索、活动以...

(Android网络3)okhttp

前言 okhttp这一个网络通信框架是我第二个学习的网络框架,很多公司也喜欢使用这一个框架,我们公司也使用,所以呢,学习这一套框架是很必要的,因为它可以实现大部分的网络请求,如普通的GET,POST请...

碉堡了图标制作软件

  • 2015年08月01日 20:20
  • 22.23MB
  • 下载

小米二代真的性价碉堡了

小米2代1999的价格真的碉堡了么?事实真的是如此吗?小米2手机为什么看起来性价比那么高?答案是,那是期货价格!事实上,到了十月中旬你也不一定能够买到,可以想象首次发售一定是限定很少的数量,然后几分钟...
  • chszs
  • chszs
  • 2012年08月17日 13:07
  • 2564

LEAP——手势识别碉堡了!!!

科技一直在追赶科幻电影和小说的步伐。《星际迷航》中的通讯器已经变成我们口袋中的手机,无线内耳耳机Uhura也变成我们的蓝牙耳机。而《少数派报告》中手势操作的电脑界面也即将被当今的技术变成现实。 ...

第八章:虚函数笔记(虚函数碉堡了)

详见:程序员编程艺术:第八章、从头至尾漫谈虚函数 一、题目要求:写出下面程序的运行结果? //谢谢董天喆提供的这道百度的面试题 #include using namespace std;...

Java实现音乐播放器【碉堡版】源码

  • 2015年04月29日 18:28
  • 18.68MB
  • 下载

碉堡了!程序员用深度学习写了个老板探测器(附源码)

原文地址:http://mp.weixin.qq.com/s/224AEGWXwwKzndzOWGCbvQ 如果上班的时候想放松一下,或者直说想偷偷懒,看点和工作无关的网页,这时候万一老板突然出...

Stereo Matching文献笔记之(三):经典算法Semi-Global Matching(SGM)之碉堡的动态规划

上一篇博客中提到了SGM的第一部分,基于分层互信息(HMI)的代价计算,本文继续说说自己对SGM代价聚合部分的理解。 (转载:http://blog.csdn.net/wsj998689aa/a...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:这个项目碉堡了
举报原因:
原因补充:

(最多只允许输入30个字)