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项目

一、使用准备

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

更多相关文章

随机推荐