Jetpack动画：LaunchedEffect内snapTo生效滞后，生命周期异常

你推测的原因完全准确：remember 保存的 Animatable 会残留上一页的数值，而 LaunchedEffect 中的代码要等到下一个渲染周期才会执行，导致页面切换时先渲染了旧状态的一帧，再触发动画重置，最终出现闪烁。

要消除这个问题，核心是让 Animatable 随数据源 points 的变化同步重置初始状态，最直接的方案是给 remember 添加 points 作为依赖键：

@Composable
fun AnimateList(points: List<DataPoints>): List<DataPoints> {
    // 将points作为remember的依赖参数，数据源变化时重新创建Animatable，初始值为0f
    val animatable = remember(points) { Animatable(0f) }
    
    LaunchedEffect(points) {
        animatable.animateTo(
            targetValue = points.size.toFloat(),
            animationSpec = tween(1000)
        )
    }
    
    return points.take(animatable.value.toInt())
}

原理说明 #

当 points 切换时，remember(points) 会触发重新创建 Animatable 实例，初始值直接设为 0f，这样第一帧渲染时就会用这个初始值截取数据，不会再出现旧页面的残留状态，从根源上避免了闪烁。

之前的代码中，Animatable 没有绑定 points 作为依赖，所以数据源变化时，它还保留着上一页的数值，直到 LaunchedEffect 执行 snapTo(0f) 才会重置，这中间的一帧就产生了闪烁。

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