如何在Android Jetpack Compose中为列表/网格初始填充添加动画？

当然可以实现列表或网格的初始填充动画，下面是几种实用的实现方案：

方式一：AnimatedVisibility配合延迟入场 #

给每个列表项包裹AnimatedVisibility，通过为不同位置的项设置递增延迟，实现依次平滑入场的效果：

@Composable
fun AnimatedInitialList(items: List<String>) {
    LazyColumn {
        itemsIndexed(items) { index, item ->
            val isVisible = remember { mutableStateOf(false) }
            
            LaunchedEffect(Unit) {
                // 按项的索引递增延迟，营造梯队入场效果
                delay(index * 50L)
                isVisible.value = true
            }

            AnimatedVisibility(
                visible = isVisible.value,
                enter = fadeIn(animationSpec = tween(300)) +
                        slideInVertically(initialOffsetY = { 40 }, animationSpec = tween(300))
            ) {
                // 替换为你的列表项布局
                Text(
                    text = item,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                )
            }
        }
    }
}

方式二：利用animateItemPlacement触发初始动画 #

animateItemPlacement原本用于项的增删移动动画，但可以通过首次加载时的状态触发，实现初始填充动画：

@Composable
fun AnimatedGrid(items: List<String>) {
    val gridState = rememberLazyGridState()

    // 首次加载时触发滚动请求，间接触发项的位置动画
    LaunchedEffect(Unit) {
        gridState.requestScrollToItem(0)
    }

    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        state = gridState
    ) {
        items(items) { item ->
            Box(
                modifier = Modifier
                    .animateItemPlacement(tween(400))
                    .padding(8.dp)
                    .background(Color.LightGray)
                    .fillMaxWidth()
                    .height(100.dp)
                    .padding(16.dp)
            ) {
                Text(text = item)
            }
        }
    }
}

方式三：自定义通用初始动画修饰符 #

封装可复用的动画修饰符，方便在不同列表/网格中快速使用：

fun Modifier.initialEnterAnimation(index: Int): Modifier {
    val alpha = animateFloatAsState(
        targetValue = 1f,
        animationSpec = tween(durationMillis = 300, delayMillis = index * 50)
    )
    val translationY = animateFloatAsState(
        targetValue = 0f,
        animationSpec = tween(durationMillis = 300, delayMillis = index * 50)
    )

    return this
        .alpha(alpha.value)
        .translationY(translationY.value * 40)
}

// 使用示例
@Composable
fun CustomAnimatedList(items: List<String>) {
    LazyColumn {
        itemsIndexed(items) { index, item ->
            Text(
                text = item,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .initialEnterAnimation(index)
            )
        }
    }
}

你可以根据应用风格，调整动画的时长、延迟、类型（比如缩放、滑入方向等），适配不同的列表或网格场景。

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