Lottie

Posted by Jfson on 2017-03-06

Lottie - Android 动画详解

Lottie 是 Airbnb 开源的火热动画库,让程序员告别痛苦的动画。对于曾经写一个大动画两三千行代码的我来说,无疑是一个巨大的福利。
接下来我将逐步介绍Lottie的使用及源码,以及 Adobe After Effects 和 Bodymovin 的安装和使用(mac)。 俗话说,不会做动画的设计不是好程序员,让我们开始吧。

相关文章

Lottie 是什么 ?

Lottie 是在 Android 和 iOS上 原生渲染 的After Effects(AE)动画,Lottie是 Airbnb 开源的支持Android 和 iOS 的动画库,它可以解析 AE 动画中用Bodymovin 导出的json文件,并在移动设备上利用原生库进行渲染 !
本文翻译于Lottie Git 项目,项目地址:https://github.com/airbnb/lottie-android

Lottie 好处 ?

先上图 !

image

设计师的动画可以完全的复现,无需程序员手工重新创建,并且超于设计师预期,麻麻再也不用担心实现跟设计有差距。
所有的这些动画都是在 After Effects 中创建,使用Bodymovin导出,无需额外的工作,Bodymovin 是一个AE 的插件,导出效果文件作为json和一个javascript web 播放器,在其之上,Lottie将它扩展到 Android,iOS和React Native。

Lottie 的使用

1、添加 Gradle 依赖

1
2
3
dependencies {
compile 'com.airbnb.android:lottie:1.5.3'
}

2、使用View
Lottie支持Jellybean(API 16)及以上。最简单的使用方法是LottieAnimationView

1
2
3
4
5
6
7
8
< 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 “ />
}

或者从 代码中加载。 从 app / src / main / assets中的json资源:

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

如果你想复用动画,比如在列表中的每个项目或者从网络请求加载JSONObject

1
2
3
4
5
6
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
...
Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {
animationView.setComposition(composition);
animationView.playAnimation();
});

然后控制动画执行或者对动画添加监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
// Do something.
}
...
animationView.setProgress(0.5f);
...
// 自定义动画的速度和持续时间
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
.setDuration(500);
animator.addUpdateListener(animation -> {
animationView.setProgress(animation.getAnimatedValue());
});
animator.start(); // 动画开始
...
animationView.cancelAnimation(); // 关闭

支持 After Effects 的功能

关键的插值器
  • Linear Interpolation 线性插值器

  • Bezier Interpolation 贝塞尔插值器

  • Hold Interpolation 保持插值器

  • Rove Across Time

  • Spatial Bezier

固定变换
  • Transform Anchor Point 锚点变换

  • Transform Position 位置变换

  • Transform Scale 伸缩比例变换

  • Transform Rotation 旋转变换

  • Transform Opacity 透明度变换

遮罩 (碉堡了!)
  • Path 路径

  • Opacity 不透明度

  • Multiple Masks (additive, subtractive, inverted) 多重多样的遮罩

Track
  • Alpha Matte 透明度遮罩
Parenting
  • Multiple Parenting

  • Nulls

图层形状
  • Rectangle (All properties) 矩形

  • Ellipse (All properties) 椭圆

  • Polystar (All properties) 北极星?什么鬼

  • Polygon (All properties. Integer point values only.) 多边形

  • Path (All properties) 路径

  • Anchor Point 锚点

  • Position 位置坐标

  • Scale 缩放

  • Rotation 旋转

  • Opacity 不透明

  • Group Transforms (Anchor point, position, scale etc) 合成变换

  • Multiple paths in one group 多路径合成

冲程(形状层,外层)
  • Stroke Color 描边颜色

  • Stroke Opacity 不透明描边

  • Stroke Width 描边宽度

  • Line Cap 压线帽

  • Dashes 破折号

填充
  • Fill Color 填充颜色

  • Fill Opacity 填充不透明度

修剪路径
  • Trim Paths Start

  • Trim Paths End

  • Trim Paths Offset

性能和内存

1、如果组合没有用到遮罩masks或mattes,那么性能和内存开销应该相当不错。没有创建位图bitmap,大多数操作都是简单的画布操作。
2、如果组合中有遮罩masks或mattes,将在合成的地方创建2-3个bitmap,当动画师徒添加到view时,bitmap由lotti自动创建,并在View删除时被回收。所以不建议在RecyclerView中使用带有遮罩masks或mattes的动画,可能会造成溢出。(后面看到git又把这一条更新掉了,索性还是贴上来吧)!后来看到Git更新为:如果组合有遮罩或遮罩,将使用屏幕外缓冲区,画面以外的缓冲区的使用和性能会有影响了。
3、如果在list中使用,建议在LottieAnimationView.setAnimation(String,CacheStrategy)中使用CacheStrategy,因此动画不必每次都反序列化。


pv UV: