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 好处 ？
先上图 ！
设计师的动画可以完全的复现，无需程序员手工重新创建，并且超于设计师预期，麻麻再也不用担心实现跟设计有差距。
所有的这些动画都是在 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，因此动画不必每次都反序列化。
