Jetpack Compose 将动画提升为一等公民。不同于传统命令式动画，Compose 基于状态驱动，只需描述目标状态与动画规格，框架自动处理插值、暂停、取消等复杂逻辑。让开发者专注于“什么”而非“如何”。
| 动画类别 | 核心API | 适用场景 |
|---|---|---|
| 💫 基础补间 | animateFloatAsState / animateColorAsState | 大小、颜色、透明度变化 |
| 🌀 过渡动画 | AnimatedVisibility / AnimatedContent | 入场/退场、内容切换 |
| ⚡ 高级动画 | Animatable / AnimationSpec | 自定义曲线、重复、反向 |
| 🧩 手势动画 | animate*AsState + pointerInput | 拖拽、滑动、缩放 |
updateTransition 或 Animatable 优雅协同。动画状态是Compose动画的心脏。常用状态容器：
remember { mutableStateOf(...) } — 基础可变状态remember { Animatable(...) } — 面向动画的状态，支持 snap、animateToanimate*AsState — 最简洁，目标值变化自动驱动updateTransition — 管理多个子动画状态val alpha = remember { Animatable(1f) }
// 调用 alpha.animateTo(0f, tween(800))
| 规格类型 | 构造参数 | 特点 |
|---|---|---|
tween | durationMillis, delay, easing | 标准补间，最常用 |
spring | dampingRatio, stiffness | 弹性效果，自然回弹 |
keyframes | 关键帧时间-值对 | 精确控制路径 |
repeatable | 重复模式, 次数 | 循环/往复动画 |
infiniteRepeatable | 重复模式, 初始延迟 | 无限循环 |
// 声明式动画：大小变化 + 弹性规格
@Composable
fun ElasticBox() {
var expanded by remember { mutableStateOf(false) }
val size by animateDpAsState(
targetValue = if (expanded) 200.dp else 80.dp,
animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
), label = "size"
)
Box(
modifier = Modifier
.size(size)
.background(Color(0xFFF5CBA7))
.clickable { expanded = !expanded }
)
}