如何在Jetpack Compose LazyColumn中实现滚动项入场动画？

要实现LazyColumn项进入可视区域时的入场动画，你需要结合列表状态检测和Compose动画API。你之前尝试的animateItemPlacement、animateItem并不适用于这个场景：前者是项重排时的动画，后者是已废弃的旧API，而AnimatedVisibility需要绑定正确的可见性状态才能触发。

下面是具体的实现方案：

核心思路 #

1. 通过LazyListState跟踪列表的滚动和可见项状态
2. 检测每个项是否进入屏幕可视区域
3. 结合Compose的动画API（如animateFloatAsState或AnimatedVisibility）实现入场动效

完整代码实现 #

方式一：自定义动画参数（灵活控制细节） #

@Composable
fun LazyColumnWithEntryAnim() {
    val listState = rememberLazyListState()

    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colorScheme.primaryContainer),
        state = listState
    ) {
        items(500) { index ->
            ItemWithAnim(
                listState = listState,
                itemIndex = index
            )
        }
    }
}

@Composable
private fun ItemWithAnim(
    listState: LazyListState,
    itemIndex: Int
) {
    // 检测当前项是否处于可视区域内
    val isVisible = remember(listState) {
        derivedStateOf {
            val layoutInfo = listState.layoutInfo
            layoutInfo.visibleItemsInfo.any { it.index == itemIndex }
        }
    }

    // 定义动画参数：透明度+Y轴偏移
    val alpha by animateFloatAsState(
        targetValue = if (isVisible.value) 1f else 0f,
        animationSpec = tween(durationMillis = 600)
    )
    val offsetY by animateFloatAsState(
        targetValue = if (isVisible.value) 0f else 50f,
        animationSpec = tween(durationMillis = 600, easing = FastOutSlowInEasing)
    )

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 10.dp, vertical = 5.dp)
            .background(MaterialTheme.colorScheme.background)
            .alpha(alpha)
            .offset(y = offsetY.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            "Jihan Khan",
            style = MaterialTheme.typography.headlineLarge.copy(color = MaterialTheme.colorScheme.onBackground)
        )
        Spacer(Modifier.height(10.dp))
        Text(
            "test@gmail.com",
            style = MaterialTheme.typography.bodyMedium.copy(color = MaterialTheme.colorScheme.onBackground)
        )
    }
}

方式二：使用AnimatedVisibility（更简洁） #

如果不需要精细控制动画参数，AnimatedVisibility可以快速实现组合动画：

@Composable
private fun ItemWithAnimatedVisibility(
    listState: LazyListState,
    itemIndex: Int
) {
    val isVisible = remember(listState) {
        derivedStateOf {
            val layoutInfo = listState.layoutInfo
            layoutInfo.visibleItemsInfo.any { it.index == itemIndex }
        }
    }

    AnimatedVisibility(
        visible = isVisible.value,
        enter = fadeIn(tween(600)) + slideInVertically(tween(600, easing = FastOutSlowInEasing)) { 50 },
        exit = fadeOut(tween(300)) + slideOutVertically(tween(300)) { 50 },
        modifier = Modifier.fillMaxWidth()
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 10.dp, vertical = 5.dp)
                .background(MaterialTheme.colorScheme.background),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                "Jihan Khan",
                style = MaterialTheme.typography.headlineLarge.copy(color = MaterialTheme.colorScheme.onBackground)
            )
            Spacer(Modifier.height(10.dp))
            Text(
                "test@gmail.com",
                style = MaterialTheme.typography.bodyMedium.copy(color = MaterialTheme.colorScheme.onBackground)
            )
        }
    }
}

优化细节 #

如果需要更精确的可见性判断（比如项完全进入屏幕才触发动画），可以修改isVisible的逻辑：

val isVisible = remember(listState) {
    derivedStateOf {
        val layoutInfo = listState.layoutInfo
        val viewportStart = layoutInfo.viewportStartOffset
        val viewportEnd = layoutInfo.viewportEndOffset
        layoutInfo.visibleItemsInfo.any { itemInfo ->
            itemInfo.index == itemIndex &&
            itemInfo.offset >= viewportStart &&
            itemInfo.offset + itemInfo.size <= viewportEnd
        }
    }
}

为什么你之前的方法无效 #

• animateItemPlacement: 仅用于项位置发生变化（如排序、插入删除）时的重排动画，不触发可视区域入场
• animateItem: 已废弃的旧API，针对项的添加/移除动画，与滚动入场无关
• AnimatedVisibility: 未绑定正确的可见性状态，无法感知项是否进入屏幕

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