如何使用Jetpack Compose基于滚动位置实现数值动画？

1. 实现步骤与代码示例 #

核心逻辑是跟踪LazyColumn滚动状态，计算滚动进度（0~1的比例值），再通过进度插值生成目标数值并绑定到UI。以下是完整实现：

步骤1：定义基础状态与变量 #

先创建滚动状态对象，并用状态存储LazyColumn的实际高度：

@Composable
fun ScrollDrivenAnimationDemo() {
    val lazyListState = rememberLazyListState()
    var columnHeight by remember { mutableStateOf(0.dp) }

步骤2：计算滚动进度 #

用derivedStateOf计算滚动距离与LazyColumn高度的比例，强制限定在0f~1f范围内，确保动画仅在列高度区间内生效：

val scrollProgress by remember {
        derivedStateOf {
            // 计算当前累计滚动偏移量
            val totalScrollOffset = lazyListState.firstVisibleItemScrollOffset +
                    lazyListState.layoutInfo.visibleItemsInfo.sumOf { it.size }
            // 转换为相对列高度的比例值
            val maxScrollRange = columnHeight.toPx()
            if (maxScrollRange == 0f) 0f else (totalScrollOffset / maxScrollRange).coerceIn(0f, 1f)
        }
    }

步骤3：生成动画数值 #

通过animateDpAsState和animateTextUnitAsState，根据滚动进度插值得到目标数值，这里以“20dp→80dp”和“12sp→24sp”为例：

// Dp类型的高度动画
    val animatedHeight by animateDpAsState(
        targetValue = lerp(start = 20.dp, end = 80.dp, fraction = scrollProgress),
        animationSpec = tween(durationMillis = 100) // 短时长动画匹配滚动速度
    )

    // TextUnit类型的字号动画
    val animatedTextSize by animateTextUnitAsState(
        targetValue = lerp(start = 12.sp, end = 24.sp, fraction = scrollProgress),
        animationSpec = tween(durationMillis = 100)
    )

步骤4：绑定动画到UI #

将计算好的动画数值应用到LazyColumn的子元素上：

LazyColumn(
        state = lazyListState,
        modifier = Modifier
            .fillMaxSize()
            .onSizeChanged { size ->
                // 实时更新LazyColumn的高度
                columnHeight = size.height.toDp()
            }
    ) {
        items(100) { index ->
            Text(
                text = "Item $index",
                fontSize = animatedTextSize,
                modifier = Modifier
                    .height(animatedHeight)
                    .padding(8.dp)
                    .fillMaxWidth()
                    .background(Color.LightGray.copy(alpha = 0.3f))
            )
        }
    }
}

2. 最佳实践 #

• 用derivedStateOf优化性能：避免滚动时频繁触发重组，该API仅在依赖（滚动状态、列高度）变化时重新计算进度。
• 严格限制进度范围：必须用coerceIn(0f,1f)确保数值不会超出起始/目标值，防止UI出现异常拉伸或缩小。
• 匹配滚动节奏的动画配置：滚动是连续操作，建议用短时长tween（如100ms）或LinearOutSlowInEasing，避免动画滞后于用户滚动动作。
• 共享动画值减少开销：将动画值定义在LazyColumn外部，让所有子元素复用同一数值，避免每个item单独计算导致的性能损耗。
• 自定义插值满足特殊需求：如果需要非匀速动画（如先快后慢），可以替换lerp为自定义插值逻辑，或通过AnimationSpec的easing参数实现。
• 适配屏幕尺寸变化：在onSizeChanged中实时更新列高度，确保横竖屏切换、窗口resize时动画依然正常工作。
• 监控重组次数：对于包含大量子元素的LazyColumn，用LayoutInspector检查重组频率，避免不必要的状态更新。

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