android Lottie详细使用

Lottie是一个适用于Android、iOS、Web和React Native的移动库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备上呈现它们！

先了解下lottie加载主体类：

• LottieAnimationView 扩展ImageView，是加载Lottie动画的默认和最简单的方法。
• LottieDrawable 与LottieAnimationView具有大多数相同的API，但您可以在任何所需的视图上使用它。
• LottieComposition是动画的无状态模型重复。您可以使用LottieCompositionFactory创建一个并将其设置在LottieDrawable或LottieAnimationView上。

文章主要针对android使用lottie动画的各种加载情况；

一、使用准备

在项目的 build.gradle 文件添加依赖

dependencies {
    //修改$lottieVersion为你需要的版本号
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

最新的版本号可以到官网或者github查询，lottie仅支持api16及以上。

http://airbnb.io/lottie/#/android

https://github.com/airbnb/lottie-android

注意：要想使用lottie2.8.0及以上版本需要将现有项目迁移到androidx项目（google迁移官方文档）（迁移会出现的问题不在今天讲解中，请自行百度或者google）

二、加载方式（官网提示：以及加载方式）

Lottie支持API 16及更高版本。

Lottie动画可以从以下位置加载动画：

• 一个json动画src/main/res/raw。
• 一个json文件src/main/assets。
• 一个zip文件src/main/assets。有关详细信息，请参阅图像文档。
• json或zip文件的URL。
• 一个json字符串。源可以来自任何东西，包括您自己的网络堆栈。
• 用于json文件或zip文件的InputStream。

1、在xml中直接加载动画的几种方式

//加载assets中json和img文件配合生成的动画 

//加载assets中的单一json动画文件

//加载raw中的json动画
 

2、动态加载assets文件json动画

  //有使用imgs图就添加下面代码，没有就直接设置setAnimation("chinese.json")即可
  lottieAnimationView01.setImageAssetsFolder("chineseImages/");
  lottieAnimationView01.setAnimation("chinese.json");
// lottieAnimationView01.loop(true);//循环播放动画，已经废弃，但是还可以使用，建议使用下面的两行代码
   lottieAnimationView01.setRepeatMode(LottieDrawable.REVERSE);//设置播放模式
   lottieAnimationView01.setRepeatCount(LottieDrawable.INFINITE);//设置重复次数
   lottieAnimationView01.playAnimation();

3、 通过url直接加载

 lottieAnimationView.setAnimationFromUrl("https://cqz-1256838880.cos.ap-shanghai.myqcloud.com/bird1.json");
 lottieAnimationView.setRepeatMode(LottieDrawable.REVERSE);
 lottieAnimationView.setRepeatCount(LottieDrawable.INFINITE);
 lottieAnimationView.playAnimation();

4、加载raw中的动画

     animation_view03.setAnimation(R.raw.bird1);
     animation_view03.setRepeatMode(LottieDrawable.REVERSE);
     animation_view03.setRepeatCount(LottieDrawable.INFINITE);
     animation_view03.playAnimation();

5、加载手机中的json文件

    String LOCALPATH = Environment.getExternalStorageDirectory().getAbsolutePath();

        try {
            animation_view04.setAnimationFromJson((readExternal(LOCALPATH + "/asnow/bird1.json")));
            animation_view04.setRepeatMode(LottieDrawable.REVERSE);
            animation_view04.setRepeatCount(LottieDrawable.INFINITE);
            animation_view04.playAnimation();
        } catch (Exception e) {
            e.printStackTrace();
        }



    /**
     * 从sd card文件中读取数据
     *
     * @param filename 文件的绝对路径 如：/storage/emulated/0/asnow/bird1.json
     * @return
     * @throws IOException
     */
    public String readExternal(String filename) throws IOException {
        StringBuilder sb = new StringBuilder();
        if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
            //打开文件输入流
            FileInputStream inputStream = new FileInputStream(filename);
            byte[] buffer = new byte[1024];
            int len = inputStream.read(buffer);
            //读取文件内容
            while (len > 0) {
                sb.append(new String(buffer, 0, len));
                //继续将数据放到buffer中
                len = inputStream.read(buffer);
            }
            //关闭输入流
            inputStream.close();
        }
        return sb.toString();
    }

6、加载手机中的json文件和imgs配合的动画

  /**
     * 加载手机中的file文件（带图片）
     *
     * @param jsonFile  json文件绝对路径 如：/storage/emulated/0/asnow/siam.json
     * @param imagesDir json文件引用的image文件的目录 如：/storage/emulated/0/asnow/siamCat/
     */
    private void showSdcardLottieEffects(String jsonFile, final String imagesDir) {
        BufferedReader bufferedReader = null;
        try {
            bufferedReader = new BufferedReader(new FileReader(jsonFile));
            String content = null;
            StringBuilder stringBuilder = new StringBuilder();
            while ((content = bufferedReader.readLine()) != null) {
                stringBuilder.append(content);
            }
            JSONObject jsonObject = new JSONObject(stringBuilder.toString());
//            final String absolutePath = imagesDir.getAbsolutePath();        //提供一个代理接口从 SD 卡读取 images 下的图片

            animation_view05.setImageAssetDelegate(new ImageAssetDelegate() {
                @Override
                public Bitmap fetchBitmap(LottieImageAsset asset) {
                    Bitmap bitmap = null;
                    FileInputStream fileInputStream = null;
                    try {
                        fileInputStream = new FileInputStream(imagesDir + asset.getFileName());
                        bitmap = BitmapFactory.decodeStream(fileInputStream);
                    } catch (FileNotFoundException e) {
                        e.printStackTrace();
                    } finally {
                        try {
                            if (bitmap == null) {
                                bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ALPHA_8);
                            }
                            if (fileInputStream != null) {
                                fileInputStream.close();
                            }
                        } catch (IOException e) {
                        }
                    }
                    return bitmap;
                }
            });
            animation_view05.setRepeatMode(LottieDrawable.REVERSE);
            animation_view05.setRepeatCount(LottieDrawable.INFINITE);
            LottieComposition.Factory.fromJsonString(String.valueOf(jsonObject), new OnCompositionLoadedListener() {
                @Override
                public void onCompositionLoaded(@Nullable LottieComposition composition) {
                    if (composition == null) {
                        return;
                    }
                    animation_view05.cancelAnimation();
                    animation_view05.setProgress(0);
                    animation_view05.setComposition(composition);
                    animation_view05.playAnimation();
                }
            });
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }

这里需要注意下图：1和2处的命名以及后缀要一样，否则就会出现不能找到文件

 

lottie的常用几种加载动画的方式都给到了，可以轻松实现完美动画展示了，至于文档提到的可以加载zip文件，我没找到加载的方法；

最后再提下：lottie动画支持暂停、播放动画，LottieAnimationView是ImageView的扩展，所以其对应的属性和方法都可以使用，具体的去看下LottieAnimationView源码，可以看到更多的功能；

 

Demo 注意项目是androidx项目