Lottie动画（一）框架使用

最新推荐文章于 2025-10-10 07:00:49 发布

原创最新推荐文章于 2025-10-10 07:00:49 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

Android基础专栏收录该内容

65 篇文章

订阅专栏

Lottie动画是Airbnb开源的动画解决方案，支持Android、IOS和Web平台。本文介绍了其在Android平台的使用方法，包括创建工程、添加引用、在xml文件或代码中设置属性等，还提及了动画监控及资源解析后操作的方法。

一.简介

Lottie动画是airbnb最新开源的一个动画解决方案，在移动平台使用非常便捷，无论Android，IOS，还是Web都支持。

官方文档地址：http://airbnb.io/lottie/

Lottie Github地址：https://github.com/airbnb/lottie-android

二.使用

1.首先，在Android Studio里自己创建一个Android工程。

2.然后，在gradle文件中添加Lottie引用：

implementation "com.airbnb.android:lottie:2.8.0"

3.在layout的xml文件中使用


<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_clock"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_centerHorizontal="true"
    app:lottie_autoPlay="true"
    app:lottie_fileName="animation/clock.json"
    app:lottie_loop="true" />

这样最简单的动画就可以播放了，如果动画除json文件，还有image文件，则在xml文件中加上lottie_imageAssetsFolde属性，Lottie支持API16以及以上，其主要属性有

lottie_fileName：在app/src/main/assets目录的动画json文件名。
lottie_loop：动画是否循环播放，默认不循环播放。
lottie_autoPlay：动画是否自动播放，默认不自动播放。
lottie_imageAssetsFolder：动画所依赖的图片目录，在app/src/main/assets/目录下的子目录，该子目录存放所有图片。

4.也可以在代码中设置LottieAnimationVi

LottieAnimationView lottieView = findViewById(R.id.lottie_clock);
lottieView.useHardwareAcceleration();
lottieView.setSpeed(1);
lottieView.playAnimation();

主要属性有：

setRepeatCount：默认为0，-1为无限循环

setSpeed: 如果speed小于0，则动画会向相反方向播放，大于0，speed越大，速度越大

useHardwareAcceleration：是否硬件加速，true硬件加速，动画速度提高

setRepeatMode：LottieDrawable.INFINITE,LottieDrawable.RESTART,LottieDrawable.REVERS，默认RESTART

以上Lottie会自动解析配置资源，然后播放动画，如果需要等资源解析完后再做操作，则可以这样操作：

final LottieAnimationView lottieView = findViewById(R.id.lottie_clock);
LottieTask<LottieComposition> lottieTask = LottieCompositionFactory.fromAsset(this, "animation/clock.json");
lottieTask.addListener(new LottieListener<LottieComposition>() {
    @Override
    public void onResult(LottieComposition result) {
        lottieView.setComposition(result);
        lottieView.playAnimation();
    }
});

5.动画监控

// 自定义动画时长，此处利用ValueAnimator值动画来实时更新AnimationView的进度来达到控制动画时长。
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
        .setDuration(500);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        lottieView.setProgress((Float) animation.getAnimatedValue());
    }
});

final LottieAnimationView lottieView = findViewById(R.id.lottie_clock);
LottieTask<LottieComposition> lottieTask = LottieCompositionFactory.fromAsset(this, "animation/clock.json");
lottieTask.addListener(new LottieListener<LottieComposition>() {
Override
    public void onResult(LottieComposition result) {
        lottieView.setComposition(result);
        lottieView.// 定义动画时长，此处利用ValueAnimator值动画来实时更新AnimationView的进度来达到控制动画时长。
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
        .setDuration(500);
animator.addpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Overide
    publivoid onAnimationUpdate(ValueAnimator animation) {
        lottieView.setProgress((Float)