Android Lottie集成及基本用法

2020-05-13  本文已影响0人  mua马

一、集成

主工程 build.gradle加入

dependencies {
   "com.airbnb.android:lottie:2.7.0"//lottie
}

为什么用2.7.0版本?

因为2.8.0及以上需要项目支持androidX
且2.7.0已经能满足日常需求,包体积更小(159kb)

二、用法

1、布局文件中使用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"/>

lottie_autoPlay:自动播放动画(默认false)
lottie_fileNameapp/src/main/assets目录下的json文件名(json文件可以直接放到assets目录下,比如“gift.json”,也可新建子目录,比如"lottie/gift.json")
lottie_loop:循环播放(默认false)
lottie_repeatMode:循环模式(默认restart)

2、调用playAnimation播放动画

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

3、监听动画播放进度addAnimatorUpdateListener

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

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

4、设置动画进度setProgress

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

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

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

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

6、缓存机制LottieCompositionCache

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

7、硬件加速useHardwareAcceleration

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

8、从url加载动画setAnimationFromUrl

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

猜你喜欢

热点阅读