jetpack 撰写 Lottie addAnimataionListener

Question

我想在 Jetpack Compose 中使用 Lottie。这是我的代码

val logoAnimationComposition by rememberLottieComposition(
    spec = LottieCompositionSpec.RawRes(
        resId = R.raw.twitter_logo_motion
    )
)
val logoAnimationProgress by animateLottieCompositionAsState(
    composition = logoAnimationComposition,
    isPlaying = true
)
LottieAnimation(
    modifier = Modifier.size(
        size = logoSize
    ),
    composition = logoAnimationComposition,
    progress = logoAnimationProgress
)

我需要知道这个动画什么时候结束。

我可以用我从 UI 设计师那里知道的动画持续时间来处理它，但这不是一个好方法。

并且文档没有提及任何相关内容。

我能做些什么？

Answer 1

在 Compose 中，我们不使用侦听器，而是必须读取状态并对其更改做出反应。

您需要从 中删除委派animateLottieCompositionAsState，然后您就可以访问更多信息，例如您可以检查isAtEnd。

使用简单的方法，您可以显示其他视图或使用副作用if完成一些工作：

val logoAnimationState = animateLottieCompositionAsState(
    composition = logoAnimationComposition,
    isPlaying = true
)
LottieAnimation(
    modifier = Modifier.size(
        size = logoSize
    ),
    composition = logoAnimationComposition,
    progress = logoAnimationState.progress
)
if (logoAnimationState.isAtEnd) {
    LaunchedEffect(Unit) {
        // to your job
    }
}

Answer 2

截至 2023 年 12 月 11 日，该isAtEnd属性对我不起作用，我必须检查进度浮点值，当它达到 1.0 时，意味着它已完成：

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(animationRes))

val progress by animateLottieCompositionAsState(composition)

LottieAnimation(
    composition = composition,
    contentScale = contentScale,
    progress = { progress },
    modifier = modifier
)

if (progress == 1f) { // animation ended
    LaunchedEffect(Unit) { onAnimationFinished() }
}