Jetpack Compose实现3秒闪烁3秒停止的循环圆形效果

可以通过状态控制+协程循环实现“闪烁3秒、停止3秒”的循环逻辑，核心是用LaunchedEffect控制闪烁状态的切换，再结合rememberInfiniteTransition在闪烁阶段执行动画。

修改后的完整代码：

@Composable
fun FlashingLight(size: Dp, color: Color) {
    val infiniteTransition = rememberInfiniteTransition()
    // 标记当前是否处于闪烁阶段
    val isFlashingActive by remember { mutableStateOf(true) }

    // 启动协程循环切换闪烁状态，直到组件销毁
    LaunchedEffect(Unit) {
        while (true) {
            // 闪烁3秒后切换为停止状态
            delay(3000)
            isFlashingActive = false
            // 停止3秒后切换回闪烁状态
            delay(3000)
            isFlashingActive = true
        }
    }

    // 根据闪烁状态执行对应逻辑：闪烁时播放循环动画，停止时固定透明度
    val lightAlpha by if (isFlashingActive) {
        infiniteTransition.animateFloat(
            initialValue = 0.0f,
            targetValue = 1.0f,
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = 500,
                    easing = LinearEasing
                ),
                repeatMode = RepeatMode.Reverse
            )
        )
    } else {
        // 停止阶段固定透明度为0（若需要停止时常亮，改为1.0f即可）
        remember { mutableStateOf(0.0f) }
    }

    Canvas(modifier = Modifier.size(size)) {
        drawCircle(color = color.copy(alpha = lightAlpha))
    }
}

关键逻辑说明： #

• 状态标记：isFlashingActive布尔状态控制动画的启停分支，决定当前是执行闪烁动画还是保持固定状态。
• 协程循环：LaunchedEffect(Unit)启动无限循环协程，通过delay实现3秒闪烁、3秒停止的交替逻辑，协程会随组件销毁自动终止。
• 动画分支：闪烁阶段沿用你原有的透明度循环动画；停止阶段固定透明度值，满足“停止闪烁”的需求。

之前尝试失败的原因： #

你之前用repeat(3)仅会执行3次循环，无法实现持续的交替逻辑；同时缺少状态与动画的绑定，导致状态变化无法影响动画的启停。

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