转自:http://blog.csdn.net/googdev/article/details/54849715

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

<com.airbnb.lottie.LottieAnimationViewandroid: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」关键字获取。

开源App动画Lottie相关推荐

  1. adobe android 动画,Lottie - Android 动画详解

    Lottie 是 Airbnb 开源的火热动画库,让程序员告别痛苦的动画.对于曾经写一个大动画两三千行代码的我来说,无疑是一个巨大的福利. 接下来我将逐步介绍Lottie的使用及源码,以及 Adobe ...

  2. 从 json 文件到炫酷动画 - Lottie 实现思路和源码分析

    Lottie是最近Airbnb开源的动画项目,支持Android.iOS.ReactNaitve三个平台,相关背景介绍可以参考之前的文章Airbnb开源炫酷动画库Lottie(译)-看看Airbnb的 ...

  3. android lottie字体json,从json文件到炫酷动画-Lottie实现思路和源码分析

    从json文件到炫酷动画-Lottie实现思路和源码分析,Lottie是最近Airbnb开源的动画项目,支持Android.iOS.ReactNaitve三个平台,本文分析主要Lottie把json文 ...

  4. Android2018年必须知道的史上最全框架、最全开源App

    图片加载库 Universal-Image-Loader,早期广泛被用的一个可重复使用的仪器为异步图像加载.缓存.显示.作者已经停止维护. Picasso,谐音"毕加索",听起来就 ...

  5. Android2019年必须知道的史上最全框架、最全开源App(高级开发人员必看,面试必看)

    声明: 最近相当长一段时间没有更博,原因在于公司内部项目孵化,周期紧张,没有时间及精力更博,今天给大家带来了整理的安卓开发比较全的各种开源框架,开源App. 图片加载库 Universal-Image ...

  6. 4 app版本号 swift_已开源 app 实现检查更新的简单方式

    如果您开发的 app 没有上架 app store,那么您肯定会考虑如何保证用户及时收到 app 更新的问题,如果您的项目是开源在某个托管平台的,那么本文就提供一种简单的方式助您实现 app 检查更新 ...

  7. Android 组件化开源 app -开眼短视频(OpenEyes)

    Android-MvvmComponent-App 项目地址:darryrzhong/Android-MvvmComponent-App  简介: Android 组件化开源 app -开眼短视频(O ...

  8. 23个开源App的App Store地址和源代码

    23个开源App的App Store地址和源代码 http://www.cocoachina.com/iphonedev/sdk/2010/0316/672.html?1359360297

  9. Android动画实战-仿简聊App动画菜单

    在上一篇博客中,我们分析了Android中四大动画的基本介绍.使用方法.特征.还没有浏览的童靴看这里:Android动画之旅一Android动画基本介绍 本篇博客,我将和大家一起使用Android动画 ...

最新文章

  1. solr5的基本操作
  2. 人脸和性别识别(基于OpenCV)
  3. 谈谈对Canal(增量数据订阅与消费)的理解
  4. 微软作为金牌会员加入Cloud Foundry基金会
  5. 学习使用Whally GraalVM!
  6. 直播连麦贾扬清,谈谈他所理解的四大 AI 落地问题 | 攻“疫”技术公开课
  7. Python爬取并简单分析2024年普通高校招生专业(专业类)选考科目要求
  8. Docker学习总结(55)——Google和Facebook为什么不用Docker?
  9. 【算法基础】动态规划解题实例之野营问题
  10. $on与$emit实现父子跨多组件通信
  11. mysql-connector-java连接失败问题
  12. 碰到高速下载器捆绑软件自动下载,卸载不完怎么办?
  13. Unity添加自发光材质
  14. 【SpringBoot】 日志框架冲突
  15. 总体标准差、样本标准差、标准误差
  16. efm32芯片电压_小壁虎PK小蝴蝶(EFM32 vs STM32L)
  17. 鸿蒙移植i.mx6ull (七) Liteos-a的编译系统
  18. OSCAR开源大会 | 「开源学」:如何分门别类理解开源
  19. XigmaNas系统(六):VirtualBox安装xp,迅雷,百度云安装,文件共享,远程桌面
  20. 转 第三章 三角学应用(1)(as3.0)

热门文章

  1. 你为何会有中年危机感?”40岁失业”是一个无法打破的魔咒吗?
  2. 心灵鸡汤:谦虚、不沉默、有危机感、不断努力
  3. C/C++内存泄漏和野指针的区别
  4. 米兔机器人魔方_米兔卡片学习机首晒
  5. Java课后题第十二章:12.18(添加包语句)
  6. 健康打卡每日提醒累了?那就让自动化帮你---HiFlow,应用连接自动化助手
  7. Android开发(一)-发展和历史
  8. navicat for mysql新建表_navicat怎么新建表
  9. C++string用法
  10. Qt+openCV学习笔记(五)Qt5.15.2+openCV4.5.4+VS2019_64编译动态库