一、简介
Lottie 是 Airbnb 开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。
目前最新的版本是 3.2.2。
GitHub：https://github.com/airbnb/lottie-android
官方文档：http://airbnb.io/lottie/
优点
- 动画由设计使用专业的动画制作工具 Adobe After Effects 来实现，使动画实现更加方便，动画效果也更好；
- 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
- 设计制作动画，前端展现动画，专业人做专业事，分工合理；
- 卖家秀即买家秀，还原程度百分之百；
- 使用 lottie 方案，json 文件大小会比 gif 文件小很多，性能也会更好。
缺点
- lottie-web文件本身仍然比较大，lottie.js大小为513k，轻量版压缩后也有144k，经过gzip后，大小为39k。所以，需要注意lottie-web的加载。目前H5项目有离线包，PC项目也会上PWA，会对其进行缓存，保证加载速度。
- lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果；
- 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范。
- 有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等
二、配置
1. 在 app/build.gradle 中添加如下：
implementation 'com.airbnb.android:lottie:3.2.2'
三、使用
1. 在 main/assets下添加动画资源，data.json.
2. 在布局文件中添加 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"/>
3. 效果图
四、动画资源
如果你因为各种原因，没有办法专门由一个设计师来为你的 App 定制动画效果，你也可以尝试找找线上公开的一些 Lottie 的动画效果，这里推荐使用 LottieFiles 这个网站。
LottieFiles: https://www.lottiefiles.com/
四、进阶
1. 本地 json 动画使用。
mLottieAnimationView= (LottieAnimationView) findViewById(R.id.animation_view); //实例化
//设置是否循环播放:true为循环.false为播放一次
mLottieAnimationView.loop(true);
// //暂停
// mLottieAnimationView.pauseAnimation();
// //开始播放
// mLottieAnimationView.playAnimation();
mLottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
//动画开始监听
}
@Override
public void onAnimationEnd(Animator animation) {
//动画结束
}
@Override
public void onAnimationCancel(Animator animation) {
//动画取消
}
@Override
public void onAnimationRepeat(Animator animation) {
//动画重复
}
});
2. 网络 json 动画使用。
private RelativeLayout mLayout;
private LottieAnimationView mLottieAnimationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_network);
mLayout = (RelativeLayout) findViewById(R.id.layout_content);
initView();
}
private void initView() {
mLottieAnimationView = new LottieAnimationView(NetworkActivity.this);
String response = "你从网络获取的json";
try {
JSONObject jsonObject = new JSONObject(response);
LottieComposition.Factory.fromJson(getResources(), jsonObject, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition lottieComposition) {
setComposition(lottieComposition);
}
});
} catch (JSONException e) {
e.printStackTrace();
}
mLayout.addView(mLottieAnimationView);
}
private void setComposition(LottieComposition lottieComposition) {
mLottieAnimationView.setProgress(0);
mLottieAnimationView.loop(true);
mLottieAnimationView.setComposition(lottieComposition);
mLottieAnimationView.playAnimation();
}
五、工具
集成流程
UI 使用 AE → 安装 bodymovin 插件 → 将 AE 中的动画工程文件通过 bodymovin 转换为 .json 文件→ 发给开发-开发集成Lottie框架-直接在项目中使用
是不是很简洁，这样我们压根就不需要一帧一帧的png或者.gif文件了，不仅让gif的加载速度变快而且节约了我们app的内部空间。
AE安装插件教程（这里的安装教程让UI去看就好）
MAC
请移步这里：https://www.jianshu.com/p/94f7a0102be5
windows
请移步这里：https://www.jianshu.com/p/cae606f45c0b