Android-Lottie动画框架使用详解

图片来自网络

在日常开发当中，为了更好的交互，我们会使用动画功能。Lottie是常用的动画框架之一，分享一下我个人了解到相关的知识。

Lottie简介

Lottie是支持Android, iOS, 和React Native,并且只需简单的代码就可以实现复杂动画效果的库.

Lottie集成

dependencies {
  implementation 'com.airbnb.android:lottie:4.2.2'
}

4.2.2版本是写博客的最新版本，开源库一般情况下使用最新版本，在开源库的迭代当中会修复一些已知的bug。

基本使用

1、在XML中使用LottieAnimationView控件

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lt_gift"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_autoPlay="false"
    app:lottie_fileName="lottie/gift.json"
    app:lottie_loop="true"
    app:lottie_repeatMode="restart"/>

属性说明：

1. lottie_autoPlay：自动播放动画（默认false）
2. lottie_fileName：app/src/main/assets目录下的json文件名（json文件可以直接放到assets目录下，比如“gift.json”，也可新建子目录，比如"lottie/gift.json"）
3. lottie_loop：循环播放（默认false）
4. lottie_repeatMode：循环模式（默认restart）

进阶使用

1、调用playAnimation播放动画

LottieAnimationView ltGift = findViewById(R.id.lt_gift);
// 代码设置动画文件
ltGift.setAnimation("lottie/gift.json");
// 开始播放动画，首次播放会有短暂延迟，因为加载动画文件需要时间
ltGift.playAnimation();

2、监听动画播放进度addAnimatorUpdateListener

ltGift.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float progress = animation.getAnimatedFraction();//播放进度
        // TODO:
    }
});

addAnimatorListener可以监听动画开始、结束、取消、重复等事件。

3、设置动画进度setProgress

LottieAnimationView ltGift = findViewById(R.id.lt_gift);
ltGift.setAnimation("lottie/gift.json");
// 不需要调用playAnimation，可直接展示该进度的动画效果
ltGift.setProgress(0.5f);

4、监听json文件加载完成addLottieOnCompositionLoadedListener

ltGift.addLottieOnCompositionLoadedListener(new LottieOnCompositionLoadedListener() {
    @Override
    public void onCompositionLoaded(LottieComposition composition) {
        //此时渲染了动画第一帧
    }
});

所有lottie动画最终都会生成一个LottieComposition对象，该对象包含了动画的所有信息，包括动画时长、宽高、起始帧、图层列表等;

5、缓存机制LottieCompositionCache

1. 运行时缓存，内部使用LruCache实现，缓存大小为10MB
2. 自测200KB以内的动画文件，首次加载需要600ms左右，缓存加载只需要100ms
3. 自动缓存，不需要手动控制

6、硬件加速useHardwareAcceleration

// 硬件加速开关（默认false，使用软件加速）
ltGift.useHardwareAcceleration(true);

7、从url加载动画setAnimationFromUrl

// 将json文件下载到本地，再进行渲染，需要考虑耗时长的情况
ltGift.setAnimationFromUrl("");

进阶使用是来源一些大佬的博客。我个人都是简单的使用，Lottie能满足日常的UI开发，如果想有更酷炫的UI玩法，你可以考虑深入了解一下进阶用法。