Lottie支持复杂动画（json）使用笔记

最新推荐文章于 2024-06-14 15:18:20 发布

贪心的阿瑜

最新推荐文章于 2024-06-14 15:18:20 发布

阅读量7.3k

点赞数 1

分类专栏： Android开发--第三方工具篇文章标签： android json动画

本文链接：https://blog.csdn.net/SHE_WithWings/article/details/54931634

版权

这篇博客详细介绍了如何在Android中使用Lottie库来支持复杂的json动画。内容包括Lottie的开源地址、基础信息、使用笔记，以及在实际应用中遇到的问题和解决办法。作者分享了获取json文件的资源方法，并提供了初始化配置、动画展示、监听设置以及处理动画问题的实践心得。

摘要由CSDN通过智能技术生成

Lottie支持复杂动画（json）使用笔记

基础信息

Lottie Git开源地址（都给出只是方便大家找，其实我本人只用到Android）
- Android：地址
- iOS：地址
- React Native：地址
JSON文件需要Bodymovin导出的json文件
- Bodymovin：地址
官方说明：地址
官方Demo（Google市场）：地址

Lottie相关信息

官方案例丢在Google应用市场了，国内不好下载。所以干脆自己打包Demo 百度云下载
- 如果是要研究代码，又不想用Git，可以自己反编译看看
- 我下载它是因为json动画文件不好弄：说说我怎么取的资源吧，尽管大多数都知道。
  1. 直接apk扩展名改成zip
  2. 使用压缩文件打开
  3. assets目录里面全部是需要的文件
  4. 我也准备了百度云链接

Lottie使用笔记

设置动画文件，优先匹配代码，代码没设置，显示的才会是布局文件的配置。

初始化配置

Lottie要求最低编辑版本是16（Android4.1）
```
minSdkVersion 16
```

Gradle注册添加支持

dependencies {
    compile 'com.airbnb.android:lottie:1.0.1'
}

添加json动画文件到资产目录（app/src/main/assets）
给使用到该控件的布局文件根标签添加（如果你在布局文件设置的话，如果没有，请忽略）
```
xmlns:app="http://schemas.android.com/apk/res-auto"
```

展示动画

布局文件

/**
 * lottie_fileName json文件名
 * lottie_loop 是否循环播放
 * lottie_autoPlay 是否自动播放
<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" />

代码实现

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
// 设置json文件
animationView.setAnimation("helloworld.json");
// 设置是否循环播放
animationView.loop(true);
// 播放动画
animationView.playAnimation();
// 暂停动画：貌似有点不同
animationView.cancelAnimation();
// 停止动画：我感觉两个效果顺序是颠倒的，使用到时候请测试看看吧
animationView.pauseAnimation();
// 跳转进度（0.0-1.1）
animationView.setProgress(float f);
// 在监听中可以添加代码设置动画时长
animator.setDuration(1000L);

切换动画

// 最简单的，但是需要注意，只适用于小Json文件，大的Json加载时间过长，中间可能空出来。
// animationView.setAnimation("LottieLogo2.json");
// animationView.playAnimation();
// 官方还给出另外一种标准的切换方式
LottieComposition.fromAssetFileName(act, "LottieLogo2.json",
        new LottieComposition.OnCompositionLoadedListener() {
            @Override
            public void onCompositionLoaded(LottieComposition composition) {
                animationView.setComposition(composition);
                animationView.playAnimation();
            }
        });

设置监听

// 播放的文件更新的时候，也可以理解每一帧都调用，没想到应用场景，反正更一个动画就不停的调用。
animationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {

    }
});

// 常用的监听，很多都很有用处。
animationView.addAnimatorListener(new Animator.AnimatorListener() {
    // 动画开始调用
    @Override
    public void onAnimationStart(Animator animator) {

    }

    // 如果设置loop为true，永远不会调用
    @Override
    public void onAnimationEnd(Animator animator) {

    }

    // 动画取消监听，监听的是Cancel方法，可是还是进度条暂停的状态。
    @Override
    public void onAnimationCancel(Animator anima