继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

lottie——让设计师来写动画

慕婉清3902891
关注TA
已关注
手记 6
粉丝 5
获赞 48

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

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


2.安装bodymovin插件
https://github.com/bodymovin/bodymovin
3.制作json

新建合成

使用bodymovin导出json

导出json文件

有了json文件之后,我们就可以写代码了
在build.grdle中引入依赖

dependencies {  
  compile 'com.airbnb.android:lottie:2.1.0'
}

布局文件中添加LottieAnimationView

<com.airbnb.lottie.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,然后播放动画。

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP