如何在Jetpack Compose重组完成后运行动画？

当动画与Composable重组并行执行时，会因资源竞争导致卡顿，以下是几种比固定delay更可靠的解决方案：

方法1：利用LaunchedEffect + 等待下一帧 #

通过withFrameMillis等待下一帧再启动动画，确保重组、布局流程完全结束后再执行动画逻辑，避免资源冲突。

@Composable
fun AnimatedAfterRecomposition() {
    val animatable = remember { Animatable(0f) }
    val targetScale = 1f

    LaunchedEffect(Unit) {
        // 等待下一帧，确保重组完成
        withFrameMillis {}
        animatable.animateTo(targetScale, animationSpec = tween(500))
    }

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Blue)
            .scale(animatable.value)
    )
}

方法2：通过onGloballyPositioned监听布局完成 #

onGloballyPositioned会在Composable完成测量、布局和绘制后触发回调，此时重组已经完成，是启动动画的安全时机。

@Composable
fun AnimatedAfterLayout() {
    val animatable = remember { Animatable(0f) }
    val scope = rememberCoroutineScope()
    val targetScale = 1f

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Red)
            .scale(animatable.value)
            .onGloballyPositioned {
                // 布局完成后启动动画
                scope.launch {
                    animatable.animateTo(targetScale, animationSpec = tween(500))
                }
            }
    )
}

方法3：基于状态变化延迟启动动画 #

如果动画依赖触发重组的状态，用SnapshotFlow监听状态变化，再等待下一帧确保重组完成后执行动画，适配动态场景。

@Composable
fun AnimatedOnStateChange(isVisible: Boolean) {
    val animatable = remember { Animatable(0f) }
    val targetAlpha = if (isVisible) 1f else 0f

    LaunchedEffect(isVisible) {
        SnapshotFlow { isVisible }
            .collectLatest { visible ->
                withFrameMillis {}
                animatable.animateTo(
                    targetValue = if (visible) 1f else 0f,
                    animationSpec = tween(300)
                )
            }
    }

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Green)
            .alpha(animatable.value)
    )
}

这些方案依赖Compose的生命周期和布局回调，而非固定时长延迟，能精准适配不同设备的重组耗时，从根源避免动画与重组的资源竞争，保证流畅性。

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