各位 Compose 彭于晏，早上好。

在之前讲解 Compose 的文章里我们花了不少篇幅探讨 Compose 的绘制流程、布局原理和重组机制——这些确实是理解 Compose 如何工作的基础。

但一个界面真正“活”起来往往靠的是动画。动画不是锦上添花，而是让使用者感知到状态变化、建立空间认知的关键手段。说起来，

后续我会连续更新几篇文章。让我们把目光转向 Compose 动画。

最简单的尺寸动画

作为我们先从最基础、最常用的 animateDpAsState 入手。说起来，

这个 API 用起来比较简单：你告诉它“目标是多大”。它就返回一个会自己变化的尺寸值。当目标改变时它会自动在旧值和新值之间平滑过渡。

但在这简单用法的背后动画程序到底是怎么工作的？为什么有时候动画感觉流畅自然有时候却显得生硬？持续时间和缓动曲线这些参数，究竟怎样影响动画的“手感”？

这里通过一个可展开卡片的实例，带你 Compose 尺寸动画的方方面面主要讲解 tween 动画规格的使用技巧。

整体结构

界面上是一个标题行和一张 Card卡片内容由正文文本和一个小箭头指示器组成。按理说，

点击卡片会切换大小状态。这个状态是一个布尔值管理的，这个布尔值就是驱动动画的唯一状态。

UI 的字体、表面颜色、内边距等其余属性全部是静态的。

// 两种形态的宽高
private val COLLAPSED_HEIGHT: Dp = .dp
private val EXPANDED_HEIGHT: Dp = .dp
// 动画时长
private const val EXPAND_DURATION_MS = // 缓动曲线选项
private data class EasingOption(
val name: String,val easing: androidx.compose.animation.core.Easing,)
private val easingOptions = listOf(
EasingOption,EasingOption,EasingOption,)
// 示例文字
private val sampleText = buildString {
appendLine
}
@Composable
fun AnimateDpPage(
onNavigate: -> Unit,onBack: -> Unit。) {
var isExpanded by remember { mutableStateOf }
var easingIndex by remember { mutableIntStateOf }
val currentEasing by remember { derivedStateOf { easingOptions } }
// 动画
val animatedHeight by animateDpAsState(
targetValue = if EXPANDED_HEIGHT else COLLAPSED_HEIGHT,animationSpec = tween(
durationMillis = EXPAND_DURATION_MS,easing = currentEasing.easing,),label = "cardHeight",)
Card(
modifier = Modifier
.fillMaxWidth
.height // 使用动画变更高度
.clickable { isExpanded =!isExpanded },//...
) {
//...
Text(
text = sampleText,fontSize = .sp,lineHeight = .sp,modifier = Modifier.padding,)
}
}

动画不追踪滚动位置或拖拽偏移量，它只关注true/false

• alertDpAsState: 只关心

动画调用解析

val animatedHeight by animateDpAsState(
targetValue : if EXPANDED_HEIGHT else COLLAPSED_HEIGHT。animationSpec : tween(
durationMillis : EXPAND_DURATION_MS,easing : currentEasing.easing,),label : "cardHeight",)

• targetValue: 在每次重组时。当布尔值从 false 变成 true `animateDpAsState` 会检测到目标值变了随即开始一段新的动画，从当前值平滑过渡到新目标。怎么说呢，
• tween: 基于持续时间。不模拟惯性弹跳，按给定时间与曲线计算每帧。
• label: 调试工具标签，不影响效果。

三种 Easing 对比

FastOutSlowInEasing：

• MATERIAL 默认曲线：起步快。接近终点慢速停下——像车起步踩油门快，接下来轻踩刹车；卡片前半段快速展开后逐渐放慢，给人平稳落地感。
• 不产生撞墙感。话说回来，
• 适合需要停稳展示内容。
• |–|     

LinearEasing：

• 再看匀速运动，每帧距离相同；听起来“完美”，但现实中任何物体启动停止都需加减速。使得机械化显得不自然，
• |–|    

FastOutLinearInEasing：

• 起步快且保持匀速直达终点：像车起步猛踩油门，却不刹车直接撞到终点；适合需要飞出屏幕或开始进入视图，但若要停稳则显粗暴。
• |–|    

为啥选择哪种 Ease 最合适？

• MATERIAL Motion 风格推荐使用FastOutSlowInEasing - 给人“卡片已落定”的安心感。
• Sine/Elastic 等弹性缓动可用于强调抖动或弹跳效果。
• Kinematic/Physics-based 曲线可表现更真实自由落体与摩擦力，但需注意物理参数可能导致不可预测行为。

各常量对感觉的影响

• - **EXPAND_DURATION_MS** *10 ms* → 近乎瞬间完成；失去「正在打开」感知 *200 ms* → 较自然且易观察 *600 ms+* → 卡顿感明显，尤其多次点击时
• - **缓动曲线** *Linear* → 僵硬机械化 *FastOutLinearIn* → 突兀冲刺 *FastOutSlowIn* → 柔和落地
• - **COLLAPSED_HEIGHT** 小：仅标题行可见—简洁概览 大：几行内容—略显拥挤
• - **EXPANDED_HEIGHT** 与内容高度匹配最佳；固定过大→空白区域过多

❗️ 使用者痛点回顾 & 常见错误 ❗️

• Mismatched Duration + Easing → “闪烁”“拖沓”。方法这方面，先看预览再微调。
• Eagerly “hard‑coding” heights 而非内容驱动 – 导致布局碎片化。
• tween vs spring 混用导致不一致 – spring 更贴近物理但耗能大。再看提示，先确认想表达的是「速度」还是「动力学」。话说回来，如果只是一次折叠/展开。可优先用 tween。

一点想法 & 实践建议

• The four key factors that shape an animation’s feel: - Duration - Easing curve - Collapsed height - Expanded height

`targetValue` reacts to boolean changes and triggers a new animation automatically.

Select right easing curve for intended motion:
• Fast‑out‑slow‑in for gentle stop‑and‑settle.
• Linear for mechanical feel.
• Fast‑out‑linear‑in when you want a direct punch.

You’re not “free‑filling defaults”;each parameter communicates intent and physics intuition to user.

`animateDpAsState` itself is nothing mystical—it just computes per-frame values based on target and curve.
• Master this core and you’ll know how to choose 娱乐ween `tween`。`spring`,or custom easings across all animations—wher it’s inline expansion,bottom sheet slides,or thumbnail zooms.

祝编码愉快 🚀