28 Apr 2026 / Android Jetpack Compose 动画 AnimationSpec Transition AnimatedVisibility Kotlin UI开发

Jetpack Compose 动画系统全解析：从基础到实战

Jetpack Compose 已成为 Android 原生 UI 开发的主流方向，其内置的动画系统相较于传统 View 体系更加直观和强大。本文将深入剖析 Compose 动画 API 的核心概念，带你从原理到实战全面掌握流畅 UI 交互的实现技巧。

一、Compose 动画体系概览

Jetpack Compose 提供了多个层次的动画 API，开发者可以根据场景灵活选择：

高级 API：AnimatedVisibility、AnimatedContent、Crossfade，适合常见的显示/隐藏和内容切换场景
中级 API：animateXxxAsState 系列函数，对单个值做动画，使用最简便
低级 API：Transition、Animation、Animatable，适合复杂多值联动动画

理解这个层次结构有助于在实际开发中选择合适的工具，避免过度设计或不必要的复杂度。

二、AnimationSpec：动画曲线与参数

AnimationSpec 是 Compose 动画的"灵魂"，决定了值如何随时间变化。常用的规格类型有：

TweenSpec：基于时间的补间动画，支持自定义 easing 曲线
SpringSpec：弹簧物理动画，参数有 dampingRatio（阻尼）和 stiffness（刚度）
KeyframesSpec：关键帧动画，在指定时间点设置精确值
RepeatableSpec：可循环的动画，支持无限重复或指定次数
SnapSpec：无动画即时跳变，适合不需要过渡效果的场景

// TweenSpec 示例：带 EaseInOut 曲线的 500ms 动画
val offsetX by animateFloatAsState(
    targetValue = if (expanded) 0f else -200f,
    animationSpec = tween(
        durationMillis = 500,
        easing = FastOutSlowInEasing
    )
)

// SpringSpec 示例：低阻尼弹性效果
val scale by animateFloatAsState(
    targetValue = if (pressed) 0.95f else 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessMedium
    )
)

三、animateXxxAsState：最简单的状态动画

animateXxxAsState 是实现单值动画最常用的方式，当状态变化时自动触发动画过渡。Compose 提供了覆盖常用类型的系列函数：

@Composable
fun AnimatedCard(isSelected: Boolean) {
    val elevation by animateDpAsState(
        targetValue = if (isSelected) 8.dp else 2.dp,
        animationSpec = tween(300)
    )
    val backgroundColor by animateColorAsState(
        targetValue = if (isSelected) MaterialTheme.colorScheme.primaryContainer
                      else MaterialTheme.colorScheme.surface,
        animationSpec = tween(300)
    )
    Card(
        elevation = CardDefaults.cardElevation(defaultElevation = elevation),
        colors = CardDefaults.cardColors(containerColor = backgroundColor),
        modifier = Modifier.padding(8.dp)
    ) {
        // Card 内容
    }
}

注意：animateXxxAsState 返回的是 State<T> 的委托属性，Compose 框架负责在动画过程中不断触发重组。

四、Transition API：多值联动动画

当多个动画值需要同步变化时，使用 updateTransition 创建 Transition 对象，统一管理多个子动画：

enum class BoxState { Small, Large }

@Composable
fun TransitionDemo() {
    var state by remember { mutableStateOf(BoxState.Small) }
    val transition = updateTransition(targetState = state, label = "boxTransition")

    val size by transition.animateDp(label = "size") { boxState ->
        when (boxState) {
            BoxState.Small -> 80.dp
            BoxState.Large -> 200.dp
        }
    }
    val color by transition.animateColor(
        transitionSpec = { tween(600) },
        label = "color"
    ) { boxState ->
        when (boxState) {
            BoxState.Small -> Color(0xFF6200EE)
            BoxState.Large -> Color(0xFF03DAC5)
        }
    }
    val cornerRadius by transition.animateDp(label = "corner") { boxState ->
        when (boxState) {
            BoxState.Small -> 8.dp
            BoxState.Large -> 40.dp
        }
    }

    Box(
        modifier = Modifier
            .size(size)
            .clip(RoundedCornerShape(cornerRadius))
            .background(color)
            .clickable { state = if (state == BoxState.Small) BoxState.Large else BoxState.Small }
    )
}

使用 Transition 的优势在于所有子动画共享同一个时间轴，即使目标值在动画中途改变，也能平滑地从当前位置过渡到新目标。

五、AnimatedVisibility：显示与隐藏动画

AnimatedVisibility 是最常用的高级动画 API，专门处理组件的显示和隐藏：

@Composable
fun ExpandableSection(title: String, content: @Composable () -> Unit) {
    var expanded by remember { mutableStateOf(false) }

    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable { expanded = !expanded }
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(text = title, style = MaterialTheme.typography.titleMedium)
            Icon(
                imageVector = if (expanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
                contentDescription = null
            )
        }
        AnimatedVisibility(
            visible = expanded,
            enter = expandVertically(animationSpec = tween(300)) + fadeIn(),
            exit = shrinkVertically(animationSpec = tween(300)) + fadeOut()
        ) {
            Box(modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
                content()
            }
        }
    }
}

内置的 enter/exit 效果包括：fadeIn/fadeOut、slideIn/slideOut、expandIn/shrinkOut、expandVertically/shrinkVertically 等，还可以用 + 运算符组合多个效果。

六、Animatable：命令式精细控制

对于需要命令式控制动画（如响应手势、序列动画）的场景，Animatable 提供了最大的灵活性：

@Composable
fun ShakeAnimation(trigger: Boolean, content: @Composable () -> Unit) {
    val offsetX = remember { Animatable(0f) }

    LaunchedEffect(trigger) {
        if (trigger) {
            // 关键帧序列：左右抖动效果
            offsetX.animateTo(
                targetValue = 0f,
                animationSpec = keyframes {
                    durationMillis = 400
                    10f at 50 with LinearEasing
                    -10f at 100 with LinearEasing
                    10f at 150 with LinearEasing
                    -10f at 200 with LinearEasing
                    5f at 250 with LinearEasing
                    -5f at 300 with LinearEasing
                    0f at 400
                }
            )
        }
    }

    Box(modifier = Modifier.offset(x = offsetX.value.dp)) {
        content()
    }
}

在 LaunchedEffect 或 rememberCoroutineScope 中调用 Animatable 的挂起函数，可以方便地实现序列动画、并行动画、响应手势的动画等高级场景。

七、性能优化与实践建议

动画是 UI 流畅度的关键，以下是几条实践建议：

优先动画 offset 和 scale：这类属性在 DrawLayer 层处理，不触发重组，性能最佳；避免动画触发布局测量的属性（如 size、padding）
使用 graphicsLayer：对于 alpha、rotation、scale 变换，用 Modifier.graphicsLayer 代替直接修改属性，绑定到 GPU 层
避免在动画中读取非 Snapshot 状态：确保动画帧回调只读取 State 对象，防止意外副作用
合理使用 remember：Animatable 必须用 remember 包裹，否则每次重组都会重置动画
Android Studio 动画预览：利用 Animation Preview 工具可视化调试动画曲线和时间轴

// 推荐：用 graphicsLayer 做 scale 动画，不触发重组
val scale by animateFloatAsState(if (highlighted) 1.05f else 1f)
Box(
    modifier = Modifier.graphicsLayer {
        scaleX = scale
        scaleY = scale
    }
) { /* content */ }

八、总结

Jetpack Compose 的动画系统设计精良，从简单的状态切换到复杂的物理模拟都有对应的工具。掌握 animateXxxAsState 处理日常场景，用 Transition 管理多值联动，用 Animatable 实现精细控制，配合 AnimatedVisibility 和 AnimatedContent 处理可见性切换，你就能构建出媲美顶级应用的动画体验。

动画不只是视觉装饰，它是用户与应用之间沟通的语言。合理的动画让操作有反馈、状态有过渡、结果有确认，从而大幅提升整体的用户体验质量。