Android中如何在ConstraintLayout内叠加Lottie动画覆盖进度条？

布局调整要点 #

把Lottie动画View和进度条放在同一个ConstraintLayout里，给两者设置完全一致的居中约束，默认把Lottie设为android:visibility="gone"。要让Lottie覆盖进度条，有两个简单办法：要么在XML布局里把Lottie写在进度条的后面（XML中后声明的View层级更高），要么给Lottie设置更高的android:elevation值。

示例布局代码：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 居中的进度条 -->
    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- 与进度条完全重合的Lottie动画 -->
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:elevation="4dp"
        app:lottie_fileName="your_success_anim.json"
        app:lottie_loop="false"
        app:lottie_autoPlay="false"
        app:layout_constraintStart_toStartOf="@id/progress_bar"
        app:layout_constraintEnd_toEndOf="@id/progress_bar"
        app:layout_constraintTop_toTopOf="@id/progress_bar"
        app:layout_constraintBottom_toBottomOf="@id/progress_bar"/>

</androidx.constraintlayout.widget.ConstraintLayout>

逻辑层实现 #

在代码里监听进度条的进度变化，一旦进度到100%，就隐藏进度条、显示Lottie并触发播放：

针对SeekBar类型的进度条：

val progressBar = findViewById<SeekBar>(R.id.progress_bar)
val lottieAnim = findViewById<LottieAnimationView>(R.id.lottie_anim)

progressBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
    override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
        if (progress == 100) {
            progressBar.visibility = View.GONE
            lottieAnim.visibility = View.VISIBLE
            lottieAnim.playAnimation()
            
            // 可选：监听动画结束做后续操作
            lottieAnim.addAnimatorListener(object : Animator.AnimatorListener {
                override fun onAnimationStart(animation: Animator?) {}
                override fun onAnimationEnd(animation: Animator?) {
                    // 比如跳转页面、隐藏动画等
                }
                override fun onAnimationCancel(animation: Animator?) {}
                override fun onAnimationRepeat(animation: Animator?) {}
            })
        }
    }

    override fun onStartTrackingTouch(seekBar: SeekBar?) {}
    override fun onStopTrackingTouch(seekBar: SeekBar?) {}
})

针对普通ProgressBar：

fun updateProgress(currentProgress: Int) {
    val progressBar = findViewById<ProgressBar>(R.id.progress_bar)
    val lottieAnim = findViewById<LottieAnimationView>(R.id.lottie_anim)
    
    progressBar.progress = currentProgress
    if (currentProgress == 100) {
        progressBar.visibility = View.GONE
        lottieAnim.visibility = View.VISIBLE
        lottieAnim.playAnimation()
    }
}

常见问题排查 #

• Lottie没覆盖进度条：检查XML里Lottie是否在进度条之后声明，或者调大elevation值；也可以在代码里调用lottieAnim.bringToFront()强制提升层级。
• Lottie不播放：确认动画文件放在assets目录下，文件名匹配；如果设了lottie_autoPlay="false"，一定要手动调用playAnimation()。

内容的提问来源于stack exchange，提问作者Sanjay