Jetpack Compose中如何实现无限过渡动画的播放/暂停功能？

你的问题核心在于**rememberInfiniteTransition一旦启动就会持续运行，无法暂停**——即使切换了playing状态，动画的coefficient值仍在后台更新，所以再次恢复播放时，画面会直接跳到当前的coefficient值，导致跳变。

要实现真正的播放/暂停，你需要使用Animatable手动控制动画的启停，结合LaunchedEffect根据playing状态触发或终止动画：

var playing by remember { mutableStateOf(true) }
// 用Animatable存储当前动画值，初始为0f
val animatable = remember { Animatable(0f) }

LaunchedEffect(playing) {
    if (playing) {
        // 播放状态下，无限重复动画
        while (true) {
            // 从当前值动画到1f，使用tween动画曲线
            animatable.animateTo(1f, animationSpec = tween())
            // 动画完成后瞬间重置回0f，保证循环连续性
            animatable.snapTo(0f)
        }
    } else {
        // 暂停状态下，停止动画（LaunchedEffect会自动取消协程，此处可省略显式stop）
        animatable.stop()
    }
}

Column() {
    Button(onClick = { playing = !playing }) {
        Text(if (playing) "Pause" else "Play")
    }
    Text(
        "I am rotating!",
        modifier = Modifier.graphicsLayer {
            rotationZ = 360f * animatable.value
        }
    )
}

关键说明： #

• Animatable：替代rememberInfiniteTransition，它能保存当前动画的精确值，暂停时不会丢失状态。
• LaunchedEffect(playing)：当playing状态变化时，协程会重新启动或取消。播放时进入无限循环，持续执行动画；暂停时协程被取消，动画停在当前值。
• animateTo + snapTo：animateTo实现从当前值到目标值的平滑过渡，snapTo在动画完成后瞬间重置到0f，保证循环的连续性。

如果需要反向循环的动画效果，可以调整循环逻辑：

while (true) {
    animatable.animateTo(1f, animationSpec = tween())
    animatable.animateTo(0f, animationSpec = tween())
}

这样就能实现真正的暂停/播放，恢复时从当前位置继续动画，不会出现跳变。

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