0Pricing
Android Academy · 课时

animate*AsState 基础

流畅地为单个值添加动画

animate*AsState 基础 是 CoddyKit 上的免费 Android Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 4 节课。

为单个值添加动画

在 Compose 中添加动画最简单的方式是使用 animate*AsState 系列。您向它提供目标值，它会返回一个 State，每当目标发生变化时，该状态都会从当前值平滑地动画到目标值。

每种常见类型都有对应的变体：animateFloatAsState、animateDpAsState、animateColorAsState、animateOffsetAsState 等。

animateFloatAsState

animateFloatAsState 为单个 Float 添加动画。一个常见用途是控制不透明度（alpha）。当 visible 切换时，返回的 alpha 会在 0f 和 1f 之间平滑过渡。

请注意 by 关键字：它可以让您将动画中的 State<Float> 直接作为普通 Float 读取。

@Composable
fun FadingLabel(visible: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        label = "alpha"
    )
    Text(
        "Hello",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

animateDpAsState

界面大小和偏移量使用 Dp，因此要为内边距、大小或位置添加动画时，请使用 animateDpAsState。

在这里，切换开关后，方框会从 80dp 增长到 160dp。由于我们将动画中的 Dp 传入 size()，方框会平滑地调整大小。

@Composable
fun GrowingBox(big: Boolean) {
    val size by animateDpAsState(
        targetValue = if (big) 160.dp else 80.dp,
        label = "size"
    )
    Box(
        Modifier
            .size(size)
            .background(Color.Blue)
    )
}

animateColorAsState

要为颜色添加动画，请使用 animateColorAsState。它会在颜色空间中进行插值，使过渡平滑自然，而不会闪烁着经过奇怪的中间色调。

在这里，状态圆点会根据布尔值在红色和绿色之间变化。

@Composable
fun StatusDot(online: Boolean) {
    val color by animateColorAsState(
        targetValue = if (online) Color(0xFF4CAF50) else Color(0xFFF44336),
        label = "status-color"
    )
    Box(
        Modifier
            .size(16.dp)
            .clip(CircleShape)
            .background(color)
    )
}

使用 animationSpec 自定义动画

默认情况下，这些辅助函数使用柔和的弹簧效果。传入 animationSpec 即可控制时间。需要使用固定时长和缓动曲线时，请使用 tween。

此面板会在 400 毫秒内滑过，并采用平滑的先加速后减速曲线。

@Composable
fun SlidingPanel(open: Boolean) {
    val offset by animateDpAsState(
        targetValue = if (open) 0.dp else 250.dp,
        animationSpec = tween(
            durationMillis = 400,
            easing = FastOutSlowInEasing
        ),
        label = "offset"
    )
    Box(Modifier.offset(x = offset)) { /* content */ }
}

缓动曲线

缓动决定动画如何加速和减速。Compose 提供了多种缓动方式：

  • LinearEasing - 匀速（具有机械感）。
  • FastOutSlowInEasing - Material 的默认方式；快速开始，柔和结束。
  • LinearOutSlowInEasing - 适用于进入屏幕的元素。
  • FastOutLinearInEasing - 适用于离开屏幕的元素。

选择合适的缓动方式，可以让运动显得经过精心设计，而不是机械僵硬。

val progress by animateFloatAsState(
    targetValue = if (done) 1f else 0f,
    animationSpec = tween(500, easing = LinearOutSlowInEasing),
    label = "progress"
)

弹簧规格

您可以使用弹簧代替固定时长，这样的效果更具物理感，也更自然。弹簧由 dampingRatio（弹性程度）和 stiffness（变化速度）定义。

弹簧的优势在于，即使目标在动画进行中发生变化，它也能平滑地适应。

val scale by animateFloatAsState(
    targetValue = if (active) 1.2f else 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
    label = "scale"
)

响应动画完成

有时您需要在动画完成时执行某些操作，例如在值达到目标后触发一次回调。animate*AsState 正是通过 finishedListener 提供了这一功能。

val alpha by animateFloatAsState(
    targetValue = if (gone) 0f else 1f,
    label = "alpha",
    finishedListener = { finalValue ->
        if (finalValue == 0f) onFullyHidden()
    }
)

为多个属性添加动画

您可以组合多个 animate*AsState 调用，同时为多个属性添加动画。每个调用都会跟踪自己的值，组合起来就能产生更丰富的效果。

在这里，芯片在被选中时会同时缩放并改变颜色。

@Composable
fun SelectableChip(selected: Boolean, text: String) {
    val scale by animateFloatAsState(if (selected) 1.1f else 1f, label = "s")
    val bg by animateColorAsState(
        if (selected) Color(0xFF3F51B5) else Color.LightGray,
        label = "bg"
    )
    Box(
        Modifier
            .graphicsLayer { scaleX = scale; scaleY = scale }
            .clip(RoundedCornerShape(16.dp))
            .background(bg)
            .padding(horizontal = 12.dp, vertical = 6.dp)
    ) { Text(text) }
}

纯 Kotlin 中的弹簧

为了帮助您直观理解弹簧“做了什么”，这里提供了一个简短的纯 Kotlin 模拟。它会在每一步中施加一定阻尼，将值推向目标，这与 Compose 的弹簧在多帧中逐渐趋近目标值的过程非常相似。

fun main() {
    var value = 0f
    val target = 100f
    var velocity = 0f
    val stiffness = 0.1f
    val damping = 0.6f
    repeat(6) { step ->
        val force = (target - value) * stiffness
        velocity = (velocity + force) * damping
        value += velocity
        println("step $step -> ${"%.1f".format(value)}")
    }
}

为 Int 和 Offset 添加动画

这一系列 API 不仅适用于浮点数和颜色。对于徽章计数目标等整数值，请使用 animateIntAsState；如果要在一次调用中为二维位置添加动画，请使用 animateOffsetAsState 或 animateIntOffsetAsState。

在这里，芯片通过为 IntOffset 添加动画来沿对角线滑动。

@Composable
fun SlidingChip(moved: Boolean) {
    val pos by animateIntOffsetAsState(
        targetValue = if (moved) IntOffset(120, 60) else IntOffset.Zero,
        label = "pos"
    )
    Box(
        Modifier
            .offset { pos }
            .size(40.dp)
            .background(Color.Magenta)
    )
}

快速检查

您希望在布尔值发生变化时，平滑地为一个以 Dp 为单位的方框宽度添加动画。哪种 API 最合适？

回顾：animate*AsState

animate*AsState 系列适合为单个值添加动画：

  • 选择对应类型的变体：animateFloatAsState、animateDpAsState、animateColorAsState 等。
  • 设置 targetValue；每次目标发生变化时，结果都会向目标值进行动画过渡。
  • 使用 animationSpec 调整运动效果，例如结合 tween 和缓动，或使用 spring。
  • 组合多个 API，同时为多个属性添加动画。
  • 使用 finishedListener 在动画完成时做出响应。

接下来：使用 AnimatedVisibility 和过渡，为内容的出现与消失添加动画。

常见问题解答

「animate*AsState 基础」课时是免费的吗？

是的 — 「animate*AsState 基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 4 节课。

「animate*AsState 基础」这节课中我会学到什么？

流畅地为单个值添加动画 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「animate*AsState 基础」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗？

能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 动画为何重要
  2. animate*AsState 基础
  3. AnimatedVisibility 与过渡
  4. 手势与弹簧动画
← 返回 Android Academy