如何正确等待动画结束？

Question

我知道我可以使用 progress 跟踪 lottie 动画完成的时刻。但是问题是我想在动画完全播放完的那一刻开始新的画面

这是我的动画代码

@Composable
fun AnimatedScreen(
    modifier: Modifier = Modifier,
    rawId: Int
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier.fillMaxSize()
    ) {
        val compositionResult: LottieCompositionResult = rememberLottieComposition(
            spec = LottieCompositionSpec.RawRes(rawId)
        )
        AnimatedScreenAnimation(compositionResult = compositionResult)
    }
}

@Composable
fun AnimatedScreenAnimation(compositionResult: LottieCompositionResult) {

    val progress by animateLottieCompositionAsState(composition = compositionResult.value)

    Column {
        if (progress < 1) {
            Text(text = "Progress: $progress")
        } else {
            Text(
                modifier = Modifier.clickable { },
                text = "Animation is done"
            )
        }
        LottieAnimation(
            composition = compositionResult.value,
            progress = progress,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.FillBounds
        )
    }
}

这是我的屏幕代码，我想在其中等待动画结束然后转到新屏幕：

@Composable
fun SplashScreen(
    navController: NavController,
    modifier: Modifier = Modifier,
    viewModel: SplashScreenViewModel = getViewModel()
) {
    val resIdState = viewModel.splashScreenResId.collectAsState()

    val resId = resIdState.value
    if (resId != null) {
        AnimatedScreen(modifier = modifier, rawId = resId)
    }

    LaunchedEffect(true) {
        navigate("onboarding_route") {
            popUpTo(0)
        }
    }
}

Answer 1

我使用了 progress 并听取了它的更新 & 一旦它到达 1f 我会调用我的函数。

示例：

@Composable
fun Splash() {
    LottieTest {
        // Do something here
    }
}

@Composable
fun LottieTest(onComplete: () -> Unit) {
    val composition: LottieCompositionResult =
        rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.camera))
    val progress by animateLottieCompositionAsState(
        composition.value,
        iterations = 1,
    )

    LaunchedEffect(progress) {
        Log.d("MG-progress", "$progress")
        if (progress >= 1f) {
            onComplete()
        }
    }

    LottieAnimation(
        composition.value,
        progress,
    )
}

注意：我就是这样做的。最好的方法仍然未知（至少对我而言）。我觉得它缺少样本。

此外，您可以从中进行很多修改，只专注于核心流程。

如何正确等待动画结束？

How to wait for the end of the animation correctly?

android

android-animation

android-jetpack-compose

lottie