Lottie 5.2.0 简单使用

最新推荐文章于 2024-04-22 01:02:33 发布

Android_小白

最新推荐文章于 2024-04-22 01:02:33 发布

阅读量939

点赞数

分类专栏： android工具类文章标签： android

本文链接：https://blog.csdn.net/m0_37039192/article/details/125081100

版权

android工具类专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.xml使用：

 <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lt_gift"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_fileName="waveAnmim_gray.json"
        app:lottie_loop="true"
        app:lottie_colorFilter="@color/red"
        app:lottie_repeatMode="restart"/>

属性说明：

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

2.代码实现

animationView = new LottieAnimationView(this);
animationView.setAnimation("waveAnmim_gray.json");
// 是否循环播放
animationView.setRepeatCount(LottieDrawable.INFINITE);
// 设置播放速率，例如：2代表播放速率是不设置时的二倍
animationView.setSpeed(1.5f);
animationView.setRepeatMode(LottieDrawable.REVERSE);
animationView.addValueCallback(new KeyPath("**", "矩形 1", "填充 1"), LottieProperty.COLOR_FILTER, new SimpleLottieValueCallback<ColorFilter>() {
       @Override
       public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
             return new PorterDuffColorFilter(getResources().getColor(R.color.red), PorterDuff.Mode.SRC_ATOP);
            }
        });
 // 开始播放
 animationView.playAnimation();

通过resolveKeyPath可获取动画的所有keyPath。

animationView.resolveKeyPath(new KeyPath("**")).forEach(keyPath -> {
    QLog.i("*****************:" + keyPath);
});
打印：

*****************:KeyPath{keys=[形状图层 3, 矩形 1],resolved=true}
*****************:KeyPath{keys=[形状图层 3, 矩形 1, 填充 1],resolved=true}
*****************:KeyPath{keys=[形状图层 15],resolved=true}
*****************:KeyPath{keys=[形状图层 15, 矩形 1],resolved=true}
*****************:KeyPath{keys=[形状图层 15, 矩形 1, 填充 1],resolved=true}
*****************:KeyPath{keys=[形状图层 2],resolved=true}
*****************:KeyPath{keys=[形状图层 2, 矩形 1],resolved=true}
*****************:KeyPath{keys=[形状图层 2, 矩形 1, 填充 1],resolved=true}
*****************:KeyPath{keys=[形状图层 1],resolved=true}
*****************:KeyPath{keys=[形状图层 1, 矩形 1],resolved=true}
*****************:KeyPath{keys=[形状图层 1, 矩形 1, 填充 1],resolved=true}

.......

通过keyPath可改变图层颜色

// 改变 形状图层 1, 矩形 1, 填充 1 这一个图层的颜色
animationView.addValueCallback(new KeyPath("形状图层 1", "矩形 1", "填充 1"), LottieProperty.COLOR_FILTER, new SimpleLottieValueCallback<ColorFilter>() {
    @Override
    public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
        return new PorterDuffColorFilter(getResources().getColor(R.color.red), PorterDuff.Mode.SRC_ATOP);
    }
});

// 想要改变多个图层颜色，可使用通配符**;

// 以下为匹配矩形 1, 填充 1 的所有图层都改变颜色。

animationView.addValueCallback(new KeyPath("**", "矩形 1", "填充 1"), LottieProperty.COLOR_FILTER, new SimpleLottieValueCallback<ColorFilter>() {
    @Override
    public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
        return new PorterDuffColorFilter(getResources().getColor(R.color.red), PorterDuff.Mode.SRC_ATOP);
    }
});

改变颜色前：