如何在Jetpack Compose的不同重组中保持Lottie动画播放进度

问题根源 #

未对动画播放状态进行跨重组记忆，默认配置下LottieAnimation每次重组都会重新初始化播放进度，导致从头开始播放。

修复代码 #

@Composable
fun Loader() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.main))
    // 记忆动画实例，跨重组保留播放进度
    val lottieAnimatable = rememberLottieAnimatable()

    // 仅在动画资源加载完成时启动一次动画，不会随重组重复触发
    LaunchedEffect(composition) {
        lottieAnimatable.animate(
            composition = composition,
            // 需要循环播放就保留下面这行，单次播放直接删除即可
            iteration = LottieConstants.IterateForever
        )
    }

    LottieAnimation(
        composition = composition,
        // 绑定记忆的动画实例的进度，不会随重组重置
        progress = { lottieAnimatable.progress }
    )
}

核心逻辑说明 #

• rememberLottieAnimatable会创建跨重组留存的动画实例，内部的播放进度、播放状态都不会随组件重组丢失
• LaunchedEffect以composition作为唯一key，仅在动画资源加载完成、资源发生变更时才会触发动画启动逻辑，避免重组时重复调用播放方法

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