如何在Jetpack Compose中实现多颜色序列无限循环动画？

核心实现代码 #

@Composable
fun SequentialColorSpacer() {
    // 定义序列里的三个关键颜色
    val green = Color.Green
    val black = Color.Black
    val white = Color.White

    // 初始化可动画颜色状态，起始色设为绿色
    val colorState = remember { Animatable(green) }

    LaunchedEffect(Unit) {
        // 无限循环执行动画序列
        while (true) {
            // 阶段1：绿色 → 黑色，时长8000ms
            colorState.animateTo(
                targetValue = black,
                animationSpec = tween(durationMillis = 8000)
            )
            // 阶段2：黑色 → 白色，时长1000ms
            colorState.animateTo(
                targetValue = white,
                animationSpec = tween(durationMillis = 1000)
            )
            // 阶段3：白色 → 绿色，时长1000ms
            colorState.animateTo(
                targetValue = green,
                animationSpec = tween(durationMillis = 1000)
            )
        }
    }

    // 带动态背景色的Spacer
    Spacer(
        modifier = Modifier
            .size(200.dp) // 可自行调整尺寸
            .background(colorState.value)
    )
}

关键说明 #

• Animatable是Compose专门用来管理可动画状态的类，这里用来实时跟踪Spacer的当前背景色。
• LaunchedEffect(Unit)确保协程只在Composable首次加载时启动一次，内部的while(true)让动画序列无限循环。
• 每个animateTo调用会阻塞协程直到该阶段动画完成，所以三个动画会严格按顺序执行，完成一轮后自动进入下一轮。
• 要是想调整动画的缓动曲线，直接把tween换成spring或者自定义的keyframes动画规格就行。

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