Jetpack Compose 动画实战：打造流畅自然的 Android UI 交互体验

为什么选择 Compose 动画？

在 Android 传统 View 体系中，实现复杂动画往往需要编写大量样板代码：ObjectAnimator、ValueAnimator、AnimatorSet 相互嵌套，维护成本极高。Jetpack Compose 的动画系统以声明式语法重新定义了这一体验——状态变化即触发动画，代码量减少 60% 以上，同时性能更优。

Compose 动画与 UI 状态深度绑定，每当状态发生变化，框架会自动计算插值并重新组合（recompose），无需手动管理动画生命周期。这种设计不仅降低了心智负担，还天然避免了传统动画中常见的内存泄漏问题。

基础动画 API 实战

Compose 提供了一系列开箱即用的高级动画 API，以下是最常用的几个：

• animateFloatAsState：用于平滑过渡单个 Float 值，适合透明度、缩放等场景

• animateDpAsState：用于尺寸、间距等 Dp 值的动画过渡

• animateColorAsState：颜色渐变动画，常用于主题切换、状态反馈

• animateContentSize：Modifier 扩展，自动对组件尺寸变化添加动画

@Composable
fun AnimatedButton() {
    var expanded by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        targetValue = if (expanded) 1.2f else 1.0f,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        ),
        label = "buttonScale"
    )

    Button(
        onClick = { expanded = !expanded },
        modifier = Modifier.graphicsLayer(scaleX = scale, scaleY = scale)
    ) {
        Text(if (expanded) "收起" else "展开")
    }
}

AnimatedVisibility 控制显隐动画

AnimatedVisibility 是 Compose 中控制组件显示/隐藏最优雅的方式，内置多种进入/退出动画效果，支持自由组合：

@Composable
fun NotificationBanner(show: Boolean, message: String) {
    AnimatedVisibility(
        visible = show,
        enter = slideInVertically(initialOffsetY = { -it }) + fadeIn(),
        exit = slideOutVertically(targetOffsetY = { -it }) + fadeOut()
    ) {
        Surface(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            color = MaterialTheme.colorScheme.primaryContainer,
            shape = RoundedCornerShape(12.dp)
        ) {
            Text(
                text = message,
                modifier = Modifier.padding(16.dp),
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

常用 EnterTransition 包括：fadeIn、slideInHorizontally、slideInVertically、expandIn、scaleIn；对应的 ExitTransition 则以 Out 结尾。多个效果通过 + 运算符组合，执行时并行播放。

Transition API 实现多属性联动动画

当需要多个属性同步变化时，使用 updateTransition 可以将它们统一管理，确保动画保持同步：

enum class CardState { Collapsed, Expanded }

@Composable
fun AnimatedCard(cardState: CardState) {
    val transition = updateTransition(
        targetState = cardState,
        label = "cardTransition"
    )

    val cardHeight by transition.animateDp(
        transitionSpec = { tween(durationMillis = 300) },
        label = "cardHeight"
    ) { state ->
        if (state == CardState.Expanded) 200.dp else 80.dp
    }

    val cornerRadius by transition.animateDp(
        transitionSpec = { spring(stiffness = Spring.StiffnessMedium) },
        label = "cornerRadius"
    ) { state ->
        if (state == CardState.Expanded) 16.dp else 8.dp
    }

    val alpha by transition.animateFloat(
        transitionSpec = { tween(200) },
        label = "contentAlpha"
    ) { state ->
        if (state == CardState.Expanded) 1f else 0f
    }

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(cardHeight),
        shape = RoundedCornerShape(cornerRadius)
    ) {
        Box(modifier = Modifier.alpha(alpha)) {
            // 展开后的详细内容
        }
    }
}

动画性能优化技巧

Compose 动画虽然简洁，但使用不当也会带来性能问题。以下几点是实际项目中常遇到的优化点：

• 使用 graphicsLayer 而非直接修改布局属性：graphicsLayer 的 scaleX/scaleY/alpha/translationX/Y 等属性变化不会触发 recompose，直接在 RenderThread 执行，性能最佳

• 避免在动画中执行昂贵计算：animationSpec 的 lambda 在每帧都会被调用，应保持轻量；复杂计算移到 LaunchedEffect 中预处理

• 为 animateXxxAsState 指定 label：从 Compose 1.3 开始，label 参数有助于 Layout Inspector 的动画调试追踪

• InfiniteTransition 注意取消：使用 rememberInfiniteTransition 创建的无限动画会随组件离开组合树自动停止，无需手动取消

// ✅ 推荐：使用 graphicsLayer，不触发 recompose
Box(
    modifier = Modifier.graphicsLayer {
        translationX = offsetX.value
        alpha = alphaValue.value
    }
)

// ⚠️ 避免：直接修改 offset/padding 会触发 recompose
Box(
    modifier = Modifier
        .offset(x = offsetX.value)  // 触发布局重测
        .padding(alphaValue.value.dp)  // 触发布局重测
)

通过合理使用 Compose 动画系统，可以在不牺牲性能的前提下，为用户提供流畅自然的交互体验。建议在开发过程中配合 Android Studio 的 Animation Preview 功能实时预览效果，大幅提升开发效率。