如何在 Android Jetpack Compose 中为 Lottie 动画使用动画侦听器？

Question

在Android View System中，我们可以像下面这样使用动画监听器来获取lottie动画回调。

 playView = LottieAnimationView(this)
 playView.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationStart(animation: Animator?) {
        }

        override fun onAnimationEnd(animation: Animator?) {
           
        }

        override fun onAnimationCancel(animation: Animator?) {
        }

        override fun onAnimationRepeat(animation: Animator?) {
        }
    })

我们如何使用 Jetpack Compose 添加监听器？我目前添加了下面的代码来播放 lottie 动画。我想收到动画播放完成后的回调

@Composable
fun PlayView() {
    val animationSpec = remember { LottieAnimationSpec.RawRes(R.raw.play_anim) }
    val result: LottieCompositionResult by remember { mutableStateOf(LottieCompositionResult.Loading) }
    val context = LocalContext.current
    LottieAnimation(
        animationSpec,
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
    )

    if (result is LottieCompositionResult.Success) {
        //start the next flow
    }
}

Answer 1

Lottie 版本 1.0.0-rc01-1 的更新答案。

您可以做的是：

val composition by rememberLottieComposition(
    LottieCompositionSpec.RawRes(R.raw.your_lottie_file)
)
val progress by animateLottieCompositionAsState(composition)

LottieAnimation(
    composition,
    modifier = Modifier
        .size(200.dp)
        .background(Color.Black),
) 

if (progress == 1.0f) {
    // Animation completes.
}

如何在 Android Jetpack Compose 中为 Lottie 动画使用动画侦听器？

How to use animation listener for Lottie animation in Android Jetpack Compose?

android

android-jetpack-compose

lottie