2017-02-03 22:15 3898人阅读 评论(12) 收藏 举报

版权声明:本文为 stormzhang 原创文章,转载请务必注明出处!

新年第一天上班,没想到就立春了,俗话说,一年之计在于春,全新的 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" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

或者代码中这样使用:

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

值得一提的是,我们的 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 下载下来了,公众号 AndroidDeveloper 后台回复「lottie」关键字获取。

本文原创发布于微信公众号 AndroidDeveloper,id: googdev,不止技术分享,还有更多扯淡,关注请慎重!

app产品设计碉堡了的更多相关文章

  1. 移动互联网(APP)产品设计的经验分享【转】

    随着移动互联网的发展,越来越多的Web产品开始布局移动端,因此最近经常碰到PM们在交流讨论移动APP产品的设计.我从事移动互联网已经有一年多了,通过不断的学习和实践也积累了一些心得,今天整理并分享一下 ...

  2. APP产品设计流程图

    产品设计流程(toB) 工作有半个月了,遇到了很多问题,也在不断学习和充实自己,让自己的工作变得更加清晰和流程化,所以整理了这么个设计流程. 收集整理一切有用或则以后可能会用的文档. 从文档里面提炼用 ...

  3. APP产品设计及运营时常见的问题

    目录 一.APP设计之初必须预埋的功能 二.H5活动页入口设计 三.全套icon /menu icon / logo图,统一后台设置便于活动推广 四.webview与原生页面的路由应统一改善用户体验 ...

  4. 15款优秀移动APP产品原型设计工具

    一新来小盆友问:“移动产品原型设计都用啥工具?” 答:“@#¥……&%*” 又问:“能详细说下各个工具吗?我比较一下” “……” 好吧,谁让我那么的爱分享而你又是小美女呢 ———————正文开 ...

  5. APP设计师拿到APP产品原型开始,七步搞定APP设计(转)

    任何一款成功的APP都需要以坚实的产品概念作为基础,因为概念决定了产品最终完成的潜力. 一般情况下,交到app设计师手里的都是移动app产品原型图.当然这个是在移动产品经理反复斟酌,并且与大家开会讨论 ...

  6. 产品设计原则之移动APP【转】

    随着移动互联网的发展,越来越多的Web产品开始布局移动端,因此最近经常碰到PM们在交流讨论移动APP产品的设计.我从事移动互联网已经有一年多了,通过不断的学习和实践也积累了一些心得,今天整理并分享一下 ...

  7. 产品原型设计5:移动App原型设计神器 - POP(Prototyping on Paper)

    一般来说,苦逼的互联网产品经理们都知道 Axure 这个原型设计工具,一方面是因为它提供了足够简单的拖拽操作,易上手,且有很多模板方便复用:另一方是因为它可直接输出html,直接在浏览器里给团队成员和 ...

  8. 【伯乐在线】FACEBOOK产品设计总监:设计APP时的14个必考题

    最近看到Facebook产品设计总监Julie Zhuo拷问产品的14个问题,非常靠谱.其中有3个问题堪称致命拷问: 1.使用前:这款产品是如何吸引到你的注意力的?2.开始使用:使用这款产品是轻松愉悦 ...

  9. Android App的设计架构:MVC,MVP,MVVM与架构经验谈

    相关:http://www.cnblogs.com/wytiger/p/5996876.html 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开发中,很多人经常会头疼于 ...

随机推荐

  1. [转]Java常用概念解答

    1. 事务是什么? 事务是作为一个逻辑单元执行的一系列操作,一个逻辑工作单元必须有四个属性,称为 ACID(原子性. 一致性.隔离性和持久性)属性,只有这样才能成为一个事务: 原子性 事务必须是原子工 ...

  2. Xcode9出现错误safe area layout guide before ios 9 真正解决办法

    网上很多解决办法瞎扯淡,以讹传讹之势愈演愈烈. 正解是选中控制器,右边面板的Builds for 选择iOS9.0 and Later,如下图红框广为流传的错解是不勾选Use Safe Area La ...

  3. 一个简单的MVC模式练习

    控制层Action接受从模型层DAO传来的数据,显现在视图层上. package Action; import java.sql.Connection; import java.sql.SQLExce ...

  4. 【spring data jpa】根据一个时间字段 查询 时间段的处理方法

    处理方法  包含结束时间00.00.00 Date createDate = boxCodeLog.getCreateDate(); if (createDate != null){ LocalDat ...

  5. dcmtk dcmmkdir 使用帮助

    例子: dcmmkdir --recurse  --input-directory C:\TEMP DICOM --output-file C:\TEMP\DCMDIR --recurse 递归 -- ...

  6. RMAN 还原与恢复

    一. RMAN 还原与恢复基础 在RMAN 用于中,还原与恢复是两个不同的概念.还原(restore):指访问先前生成的备份,从中得到一个或多个对象,然后在磁盘上的某个位置还原这些对象.恢复(reco ...

  7. SQL注入深入剖析

    SQL注入是一门很深的学问,也是一门很有技巧性的学问 1.  运算符的优先级介绍 2.  SQL语句执行函数介绍 mysql_query() 仅对 SELECT,SHOW,EXPLAIN 或 DESC ...

  8. 流畅的python第十章序列的修改,散列和切片学习记录

    只要实现了__len__和__getitem__两个方法即可将该类视为序列. 切片原理 动态存取属性 如果实现了__getattr__方法,也要定义__setattr__方法,以防对象行为不一致

  9. [Python爬虫] 之十二:Selenium +phantomjs抓取中的url编码问题

    最近在抓取活动树网站 (http://www.huodongshu.com/html/find.html) 上数据时发现,在用搜索框输入中文后,点击搜索,phantomjs抓取数据怎么也抓取不到,但是 ...

  10. Java反转单链表

    class Node { private int data; private Node nextNode; public Node(int data) { this.data = data; } pu ...