如何使LazyColumn的animateItemPlacement支持增删项及洗牌全场景动画？

我一直在应用中使用animateItemPlacement，但始终没看到预期效果，一度以为它完全失效，直到看到别人的可行示例才发现差异：

• 列表添加项：无动画，需实现
• 列表移除项：无动画，需实现
• 现有项洗牌：动画正常

我的应用里不会做洗牌操作，所以花了很久才发现只有洗牌有动画、增删项没动画的问题。

以下是完整的示例应用（目前仅支持桌面端，因使用UUID生成ID，暂无跨平台方案；可稍作调整适配Android）：

import androidx.compose.animation.core.EaseInOutCubic
import androidx.compose.animation.core.tween
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication
import kotlinx.coroutines.delay
import java.util.UUID

fun main() = singleWindowApplication {
    MaterialTheme(colorScheme = darkColorScheme()) {
        Surface(modifier = Modifier.fillMaxSize()) {
            ItemPlacementAnimationMockup()
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ItemPlacementAnimationMockup() {
    val history = remember { mutableStateListOf<HistoryItem>() }

    // 模拟列表操作
    LaunchedEffect(Unit) {
        repeat(4) {
            history.add(HistoryItem())
        }

        while (true) {
            val newItem = HistoryItem()
            delay(timeMillis = 1000)
            history.add(newItem)
            delay(timeMillis = 1000)
            history.remove(newItem)
            delay(timeMillis = 1000)
            history.shuffle()
        }
    }

    LazyColumn(
        modifier = Modifier
            .padding(16.dp)
            // 取消注释以下代码可让列表底部对齐
            // .wrapContentHeight(Alignment.Bottom)
    ) {
        items(history, key = { it }) {
            Text("Item $it", Modifier.animateItemPlacement(animationSpec = tween(
                durationMillis = 800,
                easing = EaseInOutCubic,
            )))
        }
    }
}

private data class HistoryItem(
    val id: UUID = UUID.randomUUID(),
)

解决方案 #

animateItemPlacement的设计初衷是处理已有列表项的位置变化动画（比如洗牌、排序），而增删项的入场/退场动画需要配合AnimatedVisibility来实现，这样就能覆盖所有场景：

1. 修改列表项的动画配置 #

在原代码的LazyColumn的items块中，给每个列表项添加入场/退场动画，并保留animateItemPlacement：

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically

// 替换原LazyColumn中的items部分
LazyColumn(
    modifier = Modifier.padding(16.dp)
) {
    items(history, key = { it }) { item ->
        AnimatedVisibility(
            visible = true,
            enter = slideInVertically(initialOffsetY = { it }) + fadeIn(),
            exit = slideOutVertically(targetOffsetY = { it }) + fadeOut()
        ) {
            Text(
                "Item $item",
                Modifier.animateItemPlacement(animationSpec = tween(
                    durationMillis = 800,
                    easing = EaseInOutCubic,
                ))
            )
        }
    }
}

2. 关键说明 #

• 保持items的key稳定：你已经用HistoryItem本身作为key（data class基于UUID生成equals/hashCode），这能确保Compose正确识别项的增删和位置变化。
• 动画时长统一：入场/退场动画和animateItemPlacement的时长保持一致，避免动画节奏不协调。
• 适配"同时增删一项"场景：这种情况下animateContentSize会因为列表总尺寸不变而失效，但上述方案中新增项会执行入场动画、被移除项会执行退场动画，两者独立生效，完全满足需求。

3. 自定义动画选项 #

如果需要更个性化的动画，可以调整EnterTransition和ExitTransition：

• 比如用scaleIn/scaleOut替代滑动动画
• 调整动画时长、缓动曲线
• 组合多种动画效果（如缩放+淡入淡出）

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