Jetpack Compose 动画updateTransition

在 Jetpack Compose 中，updateTransition 是一个功能强大的高级动画 API，用于管理多个相互关联的属性动画。它通过维护一个状态机（State Machine），当状态发生改变时，能够同步驱动多个属性（如大小、颜色、透明度、偏移量等）平滑过渡。

一、核心作用与优势

多属性联动（协同动画）当界面从一个状态切换到另一个状态（例如：折叠 →\rightarrow→
展开）时，往往需要同时改变多个视觉属性。updateTransition`
允许你基于同一个状态源统一管理这些属性，保持所有子动画的步调一致。
自动处理中断与平滑过渡如果在动画执行中途状态再次发生变化，updateTransition 会自动从当前的插值位置平滑过渡到新的目标状态，而不会出现视觉上的突兀跳跃或闪烁。
清晰的状态机模型它非常适合处理多状态的复杂交互（如 Idle、Pressed、Loading、Success 等），使代码逻辑比维护多个独立的 animatable 更加清晰和结构化。

二、典型使用示例

以下代码展示了如何使用 updateTransition 让一个方块在 Collapsed（折叠）和 Expanded（展开）两种状态之间切换时，同时改变其尺寸和背景颜色：

复制代码

enum class BoxState {
    Collapsed,
    Expanded
}

@Composable
fun AnimatedBox(currentState: BoxState) {
    // 1. 创建 Transition 对象，绑定目标状态
    val transition = updateTransition(targetState = currentState, label = "BoxTransition")

    // 2. 使用 transition 提供的扩展函数定义子动画
    val size by transition.animateDp(label = "SizeAnimation") { state ->
        when (state) {
            BoxState.Collapsed -> 60.dp
            BoxState.Expanded -> 200.dp
        }
    }

    val color by transition.animateColor(label = "ColorAnimation") { state ->
        when (state) {
            BoxState.Collapsed -> Color.Blue
            BoxState.Expanded -> Color.Red
        }
    }

    // 3. 将动画属性应用到 UI 组件
    Box(
        modifier = Modifier
            .size(size)
            .background(color)
    )
}

三、 updateTransition vs animate*AsState

特性	animate*AsState（如 animateDpAsState）	updateTransition
适用场景	针对单个独立的属性进行简单的状态触发动画。	针对多个属性需要基于同一个状态进行联动变化的场景。
代码结构	每一个变化的属性都需要独立声明一个状态变量。	声明一个 transition 核心对象，所有子动画在其中统一管理。
状态感知	只能感知自身值的变化。	可以通过 transition.currentState 和 transition.targetState 随时获取当前和目标的完整状态。