Lottie - Android 动画详解
Lottie 是 Airbnb 开源的火热动画库，让程序员告别痛苦的动画。对于曾经写一个大动画两三千行代码的我来说，无疑是一个巨大的福利。
接下来我将逐步介绍Lottie的使用及源码，以及 Adobe After Effects 和 Bodymovin 的安装和使用（mac）。 俗话说，不会做动画的设计不是好程序员，让我们开始吧。
相关文章
- AE 以及 Bodymovin的安装 ：http://www.jianshu.com/p/ce3837d14f13
- AE 制作一个简单的动画： http://www.jianshu.com/p/665f68933ed4
TODO: 后期持续更新，ae的使用，以及源码的分析
原文链接： https://jfson.github.io/2017/03/06/Lottie/
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 依赖
dependencies {
compile 'com.airbnb.android:lottie:1.5.3'
}
2、使用View
Lottie支持Jellybean（API 16）及以上。最简单的使用方法是LottieAnimationView
< 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资源：
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
如果你想复用动画，比如在列表中的每个项目或者从网络请求加载JSONObject
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
...
Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {
animationView.setComposition(composition);
animationView.playAnimation();
});
然后控制动画执行或者对动画添加监听
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，因此动画不必每次都反序列化。
