如何在 Jetpack Compose LazyColumn 中为滚动上的项目设置动画？

Question

我正在尝试在 Jetpack Compose 中实现基于滚动的动画，其中

LazyColumn

中的项目在出现在屏幕上时会以动画方式进入视图。这类似于经典视图系统中的

RecyclerView

中应用动画的方式，其中项目在可见视口中出现时会进行动画处理。

我尝试过使用

AnimatedVisibility

、

animateItemPlacement

和

animateItem

与

LazyColumn

，但这两种方法似乎都无法按预期工作。这是我当前的设置：

LazyColumn(
    modifier = Modifier
        .fillMaxWidth()
        .background(MaterialTheme.colorScheme.primaryContainer)
) {
    items(500) {
        Item(modifier = Modifier.animateItem())
    }
}

@Composable
private fun Item(modifier: Modifier = Modifier) {
    Column(
        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(
            "[email protected]",
            style = MaterialTheme.typography.bodyMedium.copy(color = MaterialTheme.colorScheme.onBackground)
        )
    }
}

我还尝试用

Box

包裹该 Item，并在其上应用

animateItemPlacement

或

animateItem

modifier，但这也不起作用。我正在寻找有关如何在 Jetpack Compose 中为 LazyColumn 项目实现所需动画效果的指导。任何见解将不胜感激！

Answer 1

animateItemPlacement

被

animateItem

取代。仅当项目列表更改时（即添加新项目或更改项目顺序）时才会有动画。

如果列表保持不变，并且您只想在项目可见时设置动画，则可以使用

AnimatedVisibility

:

items(500) {
    Box(Modifier.height(100.dp)) {
        var visible by remember { mutableStateOf(false) }
        LaunchedEffect(Unit) { visible = true }

        AnimatedVisibility(visible) {
            Item(/*...*/)
        }
    }
}

注：

1. AnimatedVisibility

   仅在

   visible

   参数更改时触发。因此它必须以

   false

   开头，并且需要稍后在 LaunchedEffect 中设置为

   true

   。

2. 当

   AnimatedVisibility

   以

   false

   开头时，整个内容将被隐藏，不会占用LazyColumn中的任何空间。因此，LazyColumn 中的所有其他项目也会被加载，因为它们都不会占用空间并且都适合。为了防止将

   AnimatedVisibility

   包裹在一个具有定义高度的盒子中，该盒子充当占位符，即使

   AnimatedVisibility

   不可见。

   我选择了

   100.dp

   ，但您想将其调整为您物品的实际高度。