Jetpack Compose 动画animate*AsState

YB13752026-10-20 18:18

在 Jetpack Compose 中，animate*AsState（如 animateDpAsState、animateColorAsState、animateFloatAsState 等）是最简单、最常用的单值动画 API。

它可以将一个普通的值（如大小、颜色、透明度等）包装成一个动画状态。每当目标状态发生改变时，它会自动从当前值平滑过渡到新值。

一、核心作用与特点

针对单一属性的快速动画

如果你只需要让某个单独的属性（比如点赞按钮变大一点、背景颜色改变、透明度淡入淡出）动起来，用它最合适、最轻量。

声明式与自动化

你不需要手动管理动画的启动、结束或监听器。只需将数据状态绑定到 animate*AsState，当状态改变时，Compose 会在每一帧自动重组并更新 UI。

自动中断处理

如果在动画播放到一半时目标值又发生了变化，它会从当前的位置无缝过渡到新的目标值，不会产生突兀的跳跃。

二、常见变体

根据你想要动画化的数据类型，Compose 提供了对应的扩展方法：

animateDpAsState：用于尺寸、边距等 (Dp)

animateColorAsState：用于颜色 (Color)

animateFloatAsState：用于缩放比例、透明度等 (Float)

animateIntAsState：用于计数值、网格列数等 (Int)

animateOffsetAsState：用于位置偏移 (Offset)

三、典型使用示例

以下代码展示了如何使用 animateDpAsState 和 animateColorAsState 实现一个点击后改变大小和颜色的按钮：

复制代码

@Composable
fun SimpleAnimationButton() {
    // 1. 定义一个控制状态的布尔值
    var isExpanded by remember { mutableStateOf(false) }

    // 2. 使用 animate*AsState 为尺寸和颜色创建动画状态
    val size by animateDpAsState(
        targetValue = if (isExpanded) 180.dp else 100.dp,
        label = "SizeAnimation"
    )

    val color by animateColorAsState(
        targetValue = if (isExpanded) Color.Magenta else Color.Blue,
        label = "ColorAnimation"
    )

    // 3. 点击切换状态，并将动画值应用到 UI
    Box(
        modifier = Modifier
            .size(size)
            .background(color)
            .clickable { isExpanded = !isExpanded },
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = if (isExpanded) "点击收起" else "点击展开",
            color = Color.White
        )
    }
}