如何在Jetpack Compose的Column组件中实现堆叠动画？

你的问题出在单个Animatable对象被所有RadioButtonChip共享，所以当这个值变化时，所有组件会同步执行动画，无法实现逐个延迟的堆叠效果。

解决方案：为每个组件单独创建动画实例 #

给每个RadioButtonChip分配独立的Animatable，再根据索引设置延迟启动动画，就能实现依次堆叠的效果。

方式一：组件内联管理动画逻辑

这种方式让每个组件自己负责动画逻辑，代码更内聚：

Column(
    modifier = modifier.fillMaxSize()
) {
    languages.forEachIndexed { index, language ->
        // 每个RadioButtonChip拥有独立的动画偏移对象
        val animateOffsetY = remember { Animatable(300f) }
        
        // 按索引延迟启动当前组件的动画
        LaunchedEffect(index) {
            delay(index.toLong() * 200)
            animateOffsetY.animateTo(0f, animationSpec = tween(500))
        }
        
        RadioButtonChip(
            modifier = Modifier
                .fillMaxWidth(0.5f)
                .offset { IntOffset(0, animateOffsetY.value.roundToInt()) },
            languageName = language.languageName
        )
    }
}

方式二：集中管理动画实例

如果需要统一控制所有动画的启停，可以提前创建动画实例列表，再批量触发：

// 创建与语言列表一一对应的动画对象集合
val animatables = remember(languages) {
    List(languages.size) { Animatable(300f) }
}

// 批量触发延迟动画
LaunchedEffect(Unit) {
    animatables.forEachIndexed { index, animatable ->
        delay(index.toLong() * 200)
        animatable.animateTo(0f, animationSpec = tween(500))
    }
}

Column(
    modifier = modifier.fillMaxSize()
) {
    languages.forEachIndexed { index, language ->
        RadioButtonChip(
            modifier = Modifier
                .fillMaxWidth(0.5f)
                .offset { IntOffset(0, animatables[index].value.roundToInt()) },
            languageName = language.languageName
        )
    }
}

两种方式都能实现每个RadioButtonChip按顺序延迟从下方滑入的堆叠动画效果，你可以根据代码结构偏好选择。

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