第三方开源库之 Lottie

目前最新的版本是 3.2.2。
GitHub：https://github.com/airbnb/lottie-android
官方文档：http://airbnb.io/lottie/

配置

1. 在 app/build.gradle 中添加如下：

implementation 'com.airbnb.android:lottie:3.2.2'

使用

1. 在 main/assets下添加动画资源，data.json.

   
   
   

   2.png

2. 在布局文件中添加 LottieAnimationView 控件

3. 效果图

   
   
   

   4cee4d0e971b970a7f0ab8dd7115228e.gif

动画资源

如果你因为各种原因，没有办法专门由一个设计师来为你的 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

程序员也想改 Lottie 动画？是的！