如何为基于动态列表的Canvas波形柱状图实现高度动画？

直接为每个柱状条创建Animatable对象会导致状态数量爆炸，尤其是实时录音时数据量持续增长，必然引发性能问题甚至崩溃。下面提供两种高效的实现方案，适配不同场景：

方案一：全局进度驱动的批量动画（适合首次全量绘制） #

如果是一次性加载所有波形数据，需要所有柱状条按顺序生长，只用一个全局动画进度即可，性能开销极低：

@Composable
fun AnimatedWaveform() {
    val data: SnapshotStateList<Int> = GlobalState.waveformBuffer
    // 全局动画进度，0→1控制所有条的生长进度
    val animationProgress = remember { Animatable(0f) }

    // 首次加载数据时启动动画
    LaunchedEffect(data) {
        if (animationProgress.value == 0f && data.isNotEmpty()) {
            animationProgress.animateTo(
                targetValue = 1f,
                // 总时长按数据量分配，每个条约50ms动画时间，可按需调整
                animationSpec = tween(durationMillis = data.size * 50, easing = LinearEasing)
            )
        }
    }

    Canvas(
        modifier = Modifier.fillMaxWidth().height(250.dp)
    ) {
        val canvasHeight = size.height
        // 每个条的动画延迟比例，实现依次生长效果
        val delayPerItem = 1f / data.size

        data.forEachIndexed { i, value ->
            val targetHeight = if (value > 0) value / 30f else 9f
            // 计算当前条的实际动画进度，确保不小于0、不大于1
            val itemProgress = (animationProgress.value - delayPerItem * i).coerceIn(0f, 1f)
            val currentHeight = targetHeight * itemProgress

            val spikeSize = Size(12f, currentHeight)
            val spikeOffset = Offset(
                x = i * (spikeSize.width + 6f),
                y = canvasHeight / 2f - currentHeight / 2f
            )

            drawRoundRect(
                size = spikeSize,
                topLeft = spikeOffset,
                color = Color(0xFFFF0000),
                cornerRadius = CornerRadius(2f, 2f)
            )
        }
    }
}

核心优势：仅维护一个动画状态，所有柱状条通过索引计算延迟，完全避免多Animatable带来的性能问题，适合一次性渲染大量历史波形数据的场景。

方案二：新增条目独立动画（适合实时录音场景） #

如果是录音过程中持续新增波形数据，需要新加入的柱状条单独生长，已有条保持高度，可以用状态列表绑定每个条的动画值：

@Composable
fun AnimatedLiveWaveform() {
    val data: SnapshotStateList<Int> = GlobalState.waveformBuffer
    // 保存每个条的当前动画高度，与data列表一一对应
    val animatedHeights = remember { mutableStateListOf<Float>() }

    // 同步动画列表与数据列表，为新增条目启动单独动画
    LaunchedEffect(data.size) {
        while (animatedHeights.size < data.size) {
            val index = animatedHeights.size
            val targetHeight = if (data[index] > 0) data[index] / 30f else 9f
            animatedHeights.add(0f) // 初始高度设为0

            // 为新条目启动生长动画
            animateTo(
                targetValue = targetHeight,
                animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
            ) { currentValue ->
                animatedHeights[index] = currentValue
            }
        }
    }

    Canvas(
        modifier = Modifier.fillMaxWidth().height(250.dp)
    ) {
        val canvasHeight = size.height

        animatedHeights.forEachIndexed { i, currentHeight ->
            val spikeSize = Size(12f, currentHeight)
            val spikeOffset = Offset(
                x = i * (spikeSize.width + 6f),
                y = canvasHeight / 2f - currentHeight / 2f
            )

            drawRoundRect(
                size = spikeSize,
                topLeft = spikeOffset,
                color = Color(0xFFFF0000),
                cornerRadius = CornerRadius(2f, 2f)
            )
        }
    }
}

核心优势：仅为新增的条目启动动画，已有条无需重复计算，完美适配录音时实时生成波形的场景，状态数量与数据量一致但避免了多Animatable的内存开销。

额外优化建议 #

• 不要在Canvas的forEachIndexed内部创建任何状态对象，所有状态初始化都要放在Canvas外部
• 动画时长和缓动函数可根据视觉需求调整，比如FastOutSlowInEasing更贴近Google Recorder的自然生长效果
• 如果数据量极大，可考虑限制显示的波形条数（比如只显示最近200条），进一步降低绘制压力

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