如何用Jetpack Compose实现每秒触发的逐行淡入动画？

针对你之前使用Animatable浮点数动画导致主线程占用过高、偶发卡顿的问题，这里提供一种基于Int状态+协程定时的替代方案，实现每秒触发一行的淡入效果：

核心思路 #

用Int类型变量记录当前已激活的最大行索引，通过协程定时更新该索引；每个行仅在被激活时执行一次淡入动画，避免全局持续的浮点数计算消耗资源。

实现代码 #

1. 定义状态变量 #

val totalRows = numberPad.size
// 初始值设为-1，表示还未激活任何行
var activeRowIndex by rememberSaveable { mutableStateOf(-1) }

2. 定时激活行的协程逻辑 #

LaunchedEffect(Unit) {
    // 逐行激活，每行间隔1秒
    repeat(totalRows) { index ->
        delay(1000)
        activeRowIndex = index
    }
}

3. 每行的淡入UI实现 #

// 针对每个行的rowIndex（从0开始），计算当前行的透明度
val alpha by animateFloatAsState(
    targetValue = if (rowIndex <= activeRowIndex) 1f else 0f,
    animationSpec = tween(durationMillis = 500) // 可自定义淡入时长，比如500ms
)

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(7.dp),
    modifier = Modifier.alpha(alpha)
) {
    // 你的行内容
}

方案优势 #

• 用Int状态替代持续更新的浮点数，大幅减少主线程计算量
• 每个行的淡入动画仅在激活时执行一次，无全局持续动画开销
• 协程delay是Compose推荐的定时方式，避免传统定时器的线程问题

如果需要重复播放动画，只需在repeat外层包裹while(true)循环即可：

LaunchedEffect(Unit) {
    while(true) {
        repeat(totalRows) { index ->
            delay(1000)
            activeRowIndex = index
        }
        // 可选：全部显示后重置，重新开始
        delay(2000)
        activeRowIndex = -1
    }
}

内容的提问来源于stack exchange，提问作者c-an