不使用animateItemPlacement()实现Compose项放置动画的方法

方法1：animateContentSize + AnimatedVisibility 组合 #

这是最直接的方案，利用animateContentSize让父Column平滑调整高度，同时用AnimatedVisibility给每行添加进入/退出动画，模拟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
import androidx.compose.animation.spring
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.animation.animateContentSize

data class RowData(val id: String, val content: String)

@Composable
fun DynamicAnimatedColumn(rows: List<RowData>) {
    Column(
        modifier = Modifier
            .animateContentSize(
                animationSpec = spring(
                    dampingRatio = Spring.DampingRatioMediumBouncy,
                    stiffness = Spring.StiffnessLow
                )
            )
    ) {
        rows.forEach { row ->
            // 用id作为key，确保数据更新时正确重组
            key(row.id) {
                AnimatedVisibility(
                    visible = true,
                    enter = slideInVertically(initialOffsetY = { it }) + fadeIn(),
                    exit = slideOutVertically(targetOffsetY = { it }) + fadeOut()
                ) {
                    RowItem(row)
                }
            }
        }
    }
}

@Composable
private fun RowItem(data: RowData) {
    Text(
        text = data.content,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 12.dp)
    )
}

说明：

• animateContentSize会自动处理Column的高度变化动画，避免突然跳转
• AnimatedVisibility的slideInVertically让新行从下方滑入，和animateItemPlacement的位移逻辑一致
• 用key(row.id)确保行内容更新时，动画和重组都能正确触发

方法2：使用Transition API 精细控制动画 #

如果需要更灵活的动画状态管理（比如区分“添加新行”和“更新现有行”的动画），可以用Compose的Transition API手动控制每个行的动画状态。

import androidx.compose.animation.Transition
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animateEnterExit
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun TransitionBasedDynamicColumn(rows: List<RowData>) {
    // 为每个行维护一个过渡状态，初始为false，目标为true
    val rowTransitionStates = remember(rows) {
        rows.associate { row ->
            row.id to MutableTransitionState(false).apply { targetState = true }
        }
    }

    Column(modifier = Modifier.animateContentSize()) {
        rows.forEach { row ->
            val transitionState = rowTransitionStates[row.id]!!
            Transition(transitionState) {
                val enter = slideInVertically(initialOffsetY = { it }) + fadeIn()
                val exit = slideOutVertically(targetOffsetY = { it }) + fadeOut()

                AnimatedVisibility(
                    visible = transitionState.targetState,
                    enter = enter,
                    exit = exit
                ) {
                    RowItem(row)
                }
            }
        }
    }
}

说明：

• Transition可以跟踪每个行的状态变化，当行被移除时也能触发退出动画
• 如果需要给行内容更新添加动画，可以在RowItem内部结合animateContentSize或Crossfade实现

方法3：使用animateEnterExit 修饰器（Compose 1.3+） #

Compose 1.3及以上版本提供了animateEnterExit修饰器，可以直接给单个组件添加进入/退出动画，配合父Column的animateContentSize，实现轻量的动画效果。

import androidx.compose.animation.animateEnterExit
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun AnimatedRowList(rows: List<RowData>) {
    Column(modifier = Modifier.animateContentSize()) {
        rows.forEachIndexed { index, row ->
            key(row.id) {
                RowItem(row)
                    .animateEnterExit(
                        // 新行从下方滑入，偏移量随索引调整，模拟列表联动效果
                        enter = slideInVertically(initialOffsetY = { it * (rows.size - index) }) + fadeIn(),
                        exit = slideOutVertically(targetOffsetY = { it * (rows.size - index) }) + fadeOut()
                    )
            }
        }
    }
}

说明：

• animateEnterExit是更简洁的动画API，无需嵌套AnimatedVisibility
• 通过调整initialOffsetY的计算逻辑，可以让新行的动画和已有行的位移联动，更接近animateItemPlacement的效果

关键注意事项 #

1. 数据稳定性：确保RowData是不可变数据类，或者使用rememberUpdatedState跟踪变化，避免不必要的动画触发
2. 性能优化：由于最多只显示3行，这些方案的性能开销可以忽略，无需担心性能问题
3. 动画参数调整：可以根据需求修改spring、slideInVertically的参数，调整动画的速度、弹性等效果

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