Jetpack Compose中Vico Charts动画无法停止问题求助

我在Jetpack Compose中使用Vico Charts实现了柱状图，已经设置runInitialAnimation = false禁用初始动画，但图表仍持续播放动画，代码如下：

LaunchedEffect(Unit) {
    withContext(Dispatchers.Default) {
        while (isActive) {
            modelProducer.tryRunTransaction {
                columnSeries {
                    repeat(Defaults.MULTI_SERIES_COUNT) {
                        series(
                            List(Defaults.ENTRY_COUNT) {
                                Defaults.COLUMN_LAYER_MIN_Y +
                                        Random.nextFloat() * Defaults.COLUMN_LAYER_RELATIVE_MAX_Y
                            }
                        )
                    }
                }
            }
            delay(Defaults.TRANSACTION_INTERVAL_MS)
        }
    }
}

CartesianChartHost(
    chart =
    rememberCartesianChart(
        rememberColumnCartesianLayer(
            ColumnCartesianLayer.ColumnProvider.series(
                columnColors.map {
                    rememberLineComponent(
                        color = it,
                        thickness = 8.dp,
                        shape = shape
                    )
                }
            )
        ),
        startAxis = rememberStartAxis(
            label = rememberAxisLabelComponent(
                color = Color.Black,
                textSize = MaterialTheme.typography.bodyMedium.fontSize
            )
        ),
        bottomAxis = rememberBottomAxis(
            label = rememberAxisLabelComponent(
                color = Color.Black
            )
        ),
        decorations = remember(horizontalBox) { listOf(horizontalBox) },
    ),
    modelProducer = modelProducer,
    marker = rememberMarker(),
    runInitialAnimation = false,
    zoomState = rememberVicoZoomState(zoomEnabled = true),
)

解决方案 #

runInitialAnimation = false仅控制图表首次加载时的动画，而你通过LaunchedEffect循环调用modelProducer.tryRunTransaction更新数据时，每次transaction默认都会触发数据过渡动画，这才是持续动画的来源。要停止动画，需要在数据更新时显式禁用transaction的动画：

1. 单次transaction禁用动画
   修改tryRunTransaction调用，传入animationSpec = null：

   modelProducer.tryRunTransaction(animationSpec = null) {
       columnSeries {
           repeat(Defaults.MULTI_SERIES_COUNT) {
               series(
                   List(Defaults.ENTRY_COUNT) {
                       Defaults.COLUMN_LAYER_MIN_Y +
                               Random.nextFloat() * Defaults.COLUMN_LAYER_RELATIVE_MAX_Y
                   }
               )
           }
       }
   }
   

2. 全局禁用所有更新动画
   如果不需要任何数据更新动画，可以在创建modelProducer时直接设置默认动画规格为null：

   val modelProducer = remember {
       ChartModelProducer(
           initialAnimationSpec = null,
           transactionAnimationSpec = null
       )
   }
   

另外，若只是测试数据更新，建议调大Defaults.TRANSACTION_INTERVAL_MS的间隔，避免过于频繁的更新导致视觉上的持续闪烁感。

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