首先来思考一下如何实现下面的动画

Android的动画有很多种:

Frame Animation(逐帧动画):

主要用于播放一帧帧准备好的图片,类似GIF图片。

Tween Animation(补间动画):

补间动画就是我们只需指定开始、结束的“关键帧”,而变化中的其他帧由系统来计算,不必自己一帧帧的去定义。

Property Animation(属性动画):

属性动画,这个是在Android 3.0中才引进的,它可以直接更改我们对象的属性。在上面提到的Tween Animation中,只是更改View的绘画效果而View的真实属性是不改变的。

那么到底要用哪一种动画来实现呢?下面开始进入正题。

1.介绍

要实现上面的动画,可以使用lottie,lottie虽然不属于上述的三种动画,但却可以实现上面的效果。那么到底什么是lottie?

Lottie是一个iOS,Android和React Native库,可以实时渲染After Effects动画,并且允许本地app像静态资源那样轻松地使用动画。Lottie使用名为Bodymovin的开源After Effects的扩展程序导出的JSON文件格式的动画数据。

实现动画的方式有很多种,那我们为什么要用lottie呢

2.示例

如果用传统的方法实现上图的动画,是不是想死的心都有了,但是用lottie来实现的话,可能只需简单的几行代码。多简单呢?

LottieAnimationView anima tionView = (LottieAnimationView) findViewById(R.id.animation_view);

animationView.setAnimation("hello-world.json");

animationView.loop(true);

animationView.playAnimation();

没错就是这么简单。

暂时不看代码,先看看lottie的原理

Lottie使用json文件来作为动画数据源,json文件是通过 Bodymovin 插件导出的,查看sample中给出的json文件,其实就是把图片中的元素进行来拆分,并且描述每个元素的动画执行路径和执行时间。Lottie的功能就是读取这些数据,然后绘制到屏幕上。

现在思考如果我们拿到一份json格式动画如何展示到屏幕上。首先要解析json,建立数据到对象的映射,然后根据数据对象创建合适的Drawable绘制到View上,动画的实现可以通过操作读取到的元素完成。

如何使用lottie?

1.安装After Effects

有了json文件之后,我们就可以写代码了

在build.grdle中引入依赖

dependencies {

compile 'com.airbnb.android:lottie:2.1.0'

}

布局文件中添加LottieAnimationView

android:id="@+id/animation_view"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:lottie_fileName="data.json"

app:lottie_loop="true"

app:lottie_autoPlay="true" />

在app/src/main/目录下创建文件夹assets,吧刚才的json文件放进去

然后播放动画

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);

animationView.setAnimation("data.json");

animationView.loop(true);

animationView.playAnimation();

更多属性、方法

监听动画播放进度:animationView.addAnimatorUpdateListener()

是否循环播放:animationView.loop()

自定义速度与时长:ValueAnimator.ofFloat(0f,1f).setDuration(500)

播放动画:animationView.playAnimation()

停止播放:animationView.cancelAnimation()

网络请求json:

内存占用

1.如果没有mask和mattes,那么性能和内存非常好,没有bitmap创建,大部分操作都是简单的cavas绘制。

2.如果存在mattes,将会创建2-3个bitmap。bitmap在动画加载到view时被创建,被view删除时回收。所以不宜在RecyclerView中使用保函mattes或者mask的动画,否则会引起bitmap抖动。

3.如果在列表中使用动画,推荐使用缓存

优点

1.跨平台支持ios,android,react native

2.从代码上看,Android端的实现是基于Drawable、ios端是基于layer,最终都是对canvas操作,中间除去解析json外,基本没有耗费性能的行为

3.动画由json文件描述,占用空间不多

4.支持服务端url方式创建。所以可以通过服务端配置json文件,随时替换客户端的动画,不用通过发布版本就可以做到。

5.设计师的成果可以最大程度得到实现。

6.开发成本低。

仍然存在的问题

1.bodymovin插件待完善

2.目前不支持文字,所有文字必须转为矢量图才能正常展示动画

3.动画无法被编辑,即移动端无法更改远端下载到本地的动画

4.只支持AE导出来的特定格式文件

总结

以往实现复杂的动画效果是一个让人头痛的问题,现在有了lottie,无论多复杂的动画都可以交给设计师去处理。开发所需要做的只是添加一个view,然后播放动画。

lottie动画android,lottie——让设计师来写动画相关推荐

  1. android 清理缓存动画,Android仿微信清理内存图表动画(解决surfaceView屏幕闪烁问题)demo实例详解...

    最近接了一个项目其中有功能要实现一个清理内存,要求和微信的效果一样.于是想到用surfaceView而不是继承view.下面小编给大家解析下实现思路. surfaceView是为了解决频繁绘制动画产生 ...

  2. android电池充电动画,Android 开机充电图标和充电动画效果

    首先驱动需要先获取到2个power supply kernel\msm-3.18\drivers\usb\phy\phy-msm-usb.c motg->usb_psy.name = " ...

  3. android 缩小消失动画,Android本身View的拉长缩短动画

    作者:XINHAO_HAN 在Android中所熟悉的动画基本分为四种,无论是View动画还是属性动画 1.平移 2.透明 2.缩放 4.旋转 附加项:插入器 在这里我放一个简单的Demo或许能转变你 ...

  4. android 字体 动画,android 对绘制的文本添加动画

    场景: 存在较多绘制内容的区域需要某些动画效果, 需要尽量少修改视图的绘制方法,做到动画与绘制分离. 看个简单例子: image 我在一个视图上绘制了一行文字,先看一下绘制部分的代码: public ...

  5. MTK平台修改Android动画,Android MTK平台修改开关机动画和开机logo

    转载请注明出处:http://blog.csdn.net/u011479494/article/details/50682089 一.修改开机logo 由于我的机器分辨率为540*960 替换:med ...

  6. android 字母path动画,Android绘制(三):Path结合属性动画, 让图标动起来!

    目录 效果图 前言 绘制 属性动画 最后 效果图 不废话, 直接上效果图, 感兴趣再看下去. 其实不单单是效果图演示的, 运用熟练的话各种图标之间都是可以切换的. 暂停到终止 暂停到播放 前言 之前的 ...

  7. android显示绘图动画,Android自定义View绘图实现渐隐动画

    实现了一个有趣的小东西:使用自定义view绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边 ...

  8. android酷炫转圈动画,android常用旋转线条加载动画

    想要知道关于更多自定义View的实例,请参考:android自定义View索引 先上个效果图,以免大家跑错地了. 嗯,整个来说呢,除了舍不得充VIP去掉水印之外,其他都挺好的. 下面开始实现我们的效果 ...

  9. android红心点赞动画,Android控件FlowLikeView实现点赞动画

    现在市面上直播类的应用可以说是一抓一大把,随随便便就以什么主题来开发个直播App,说白了就想在这领域分杯羹.在使用这些应用过程中其实不难发现,在所有的直播界面,少不了的就是各种打赏.各种点赞.今天自己 ...

最新文章

  1. BZOJ 2138 stone(霍尔定理推论,线段树)【BZOJ 修复工程】
  2. TF (transform) in ROS
  3. 精选10大机器学习开源项目 !(附链接)
  4. 重新解析 REST Service(REST Service 的最佳实践,第 1 部分)
  5. 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 完整代码示例 )
  6. LAMP架构介绍,MySQL、MariaDB介绍,MySQL安装
  7. 在WPF的TreeView中实现右键选定
  8. 目标识别:如何从人脸图片中扣出眼图,实时人脸人眼检测和识别
  9. gtest的Linux使用(Google test)
  10. linux主从库配置文件,Linux系统中MongoDB安装及主从配置linux操作系统 -电脑资料
  11. Silverlight的资源
  12. 通过对比文件md5值,实现对文件的替换
  13. css-盒子模型详解以及远视图的制作
  14. 转:iris数据集及简介
  15. distpicker省市区插件设置请选择省市区提示/或设置初始值问题
  16. 【毕业论文】分享当年使用过的一些好用网站,包括论文去重,翻译,作图神器,免费文献查找 | 第 1 期
  17. cfar(Constant False-Alarm Rate)
  18. 无锡市计算机表演大赛,第二十七届中国儿童青少年计算机表演赛无锡赛区决赛-无锡少年宫.DOC...
  19. 还不了解小程序?看这一篇文章就够了
  20. word如何设置页码,WPS超实用小技巧

热门文章

  1. 设置input不能输入空格
  2. 麒麟820和980哪个好-麒麟820和980差距有多大
  3. Markdown基本语法和Typora使用教程
  4. 【2023秋招面经】20220713兴业数金前端一面
  5. Spring Boot Vue Element入门实战(五)封装axios
  6. MySQL当中的 “My” 是什么意思?
  7. java多线程复习与巩固(五)
  8. webstorm设置live templates
  9. 2022年年度总结 春华秋实 把握所愿
  10. Laravel 调试利器 —— Laravel Debugbar 扩展包安装及使用教程(转)