Android Compose 动画实践：内容切换与页面转场

1. 内容切换器：AnimatedContent

在实际开发中，最常见的场景之一，是根据状态变化切换整个容器的 UI 展示。

例如：

从"搜索结果页"切换到"空状态页"
从"加载中"切换到"内容展示"
从"答题中"切换到"答题结果"

如果只是使用普通的 if / else 来控制显示内容，那么状态变化时，新内容会直接瞬间替换旧内容，缺少过渡效果，视觉上会显得比较生硬。

而 AnimatedContent 就是专门为这种"内容切换动画"设计的可组合函数（Composable）。

工作原理

AnimatedContent 会监听一个目标状态（target state），这个状态通常是：

枚举（Enum）
整数（Int）
或其他可比较的状态对象

当状态发生变化时，它会自动完成以下流程：

识别退出内容（Initial Content）也就是当前正在显示、即将离开的 UI。
识别进入内容（Target Content）也就是新的目标 UI。
同时执行进入与退出动画

它会让：

旧内容执行退出动画
新内容执行进入动画

两者并行执行，实现平滑的视觉切换。这种机制可以保证内容切换过程自然连贯，而不是突兀地"闪现"。

kotlin 复制代码

enum class QuizState { QUESTION, CORRECT, INCORRECT }

@Composable
fun QuizAnimator() {
    var quizState by remember { mutableStateOf(QuizState.QUESTION) }

    // Use AnimatedContent tied to the current state
    AnimatedContent(
        targetState = quizState,
        label = "QuizTransition",
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .padding(16.dp),
        // OPTIONAL: Customize the transition (Entry + Exit)
        transitionSpec = {
            // Check the direction of the transition for a different feel
            if (targetState == QuizState.CORRECT) {
                // If correct, slide the new content in from the bottom
                slideInVertically { it } with slideOutVertically { -it }
            } else {
                // For other transitions, use a simple fade + scale
                (fadeIn(animationSpec = tween(400)) + scaleIn(initialScale = 0.8f)) with
                (fadeOut(animationSpec = tween(400)) + scaleOut(targetScale = 0.8f))
            }.using(
                // Ensure the content shift itself is animated (Part 2 concept)
                SizeTransform(clip = false) 
            )
        }
    ) { targetContent ->
        // The content based on the target state
        when (targetContent) {
            QuizState.QUESTION -> QuestionContent { quizState = QuizState.CORRECT }
            QuizState.CORRECT -> SuccessContent { quizState = QuizState.QUESTION }
            QuizState.INCORRECT -> FailureContent { quizState = QuizState.QUESTION }
        }
    }
}
// Code Comments Insight: The `transitionSpec` allows you to define complex, state-aware animations.
// The `with` keyword combines the entry and exit animations.
// `SizeTransform` ensures the container size animates smoothly if the new content is a different size.

2. 简单淡入淡出：CrossFade

如果你的场景并不需要复杂的动画效果，例如：

滑动（Slide）
缩放（Scale）
弹性动画（Spring / Physics Animation）
多阶段组合过渡

而只是希望一个组件淡出，同时另一个组件淡入，那么 Crossfade 会是更轻量、更直接的选择。

它专门用于实现最基础的"交叉淡入淡出"切换效果。

kotlin 复制代码

enum class AppTheme { LIGHT, DARK }

@Composable
fun ThemeSwitcher(currentTheme: AppTheme) {
    Crossfade(
        targetState = currentTheme,
        animationSpec = tween(durationMillis = 1000), // A slow, deliberate fade
        label = "ThemeCrossFade"
    ) { theme ->
        // The content of the Composable changes based on the 'theme' variable
        when (theme) {
            AppTheme.LIGHT -> LightModeView()
            AppTheme.DARK -> DarkModeView()
        }
    }
}
// Code Comments Insight: Crossfade is ideal for quick aesthetic swaps like themes, 
// image gallery transitions, or simple loading state indicators.

当使用 Navigation Compose 在多个页面之间导航时，本质上也发生了内容切换。

例如：

首页跳转到详情页
登录页进入主页
列表页跳转到编辑页

这些场景从表现上看，和前面提到的内容替换类似，但它们的作用层级完全不同。

kotlin 复制代码

@Composable
fun AppNavHost(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        // Define the Home Screen with standard fade transitions
        composable("home") { HomeScreen(navController) }

        // Define the Detail Screen with unique slide transitions
        composable(
            route = "details/{itemId}",
            // Transition for the Details Screen coming onto the stack
            enterTransition = {
                slideInHorizontally { fullWidth -> fullWidth } + fadeIn() // Slide from right
            },
            // Transition for the Details Screen leaving the stack (e.g., hitting back)
            exitTransition = {
                slideOutHorizontally { fullWidth -> -fullWidth } + fadeOut() // Slide out to left
            }
        ) { backStackEntry ->
            DetailScreen(
                itemId = backStackEntry.arguments?.getString("itemId"),
                navController = navController
            )
        }
    }
}
// Code Comments Insight: The Navigation library takes care of the exact timing and 
// composition, ensuring the entering screen and exiting screen are briefly displayed together.

常见问题

1. 应该使用 AnimatedContent 还是 AnimatedVisibility？

这是 Jetpack Compose 动画开发中非常常见的疑问。

虽然两者都能实现"内容变化动画"，但它们解决的问题并不一样。 AnimatedVisibility：控制单个 Composable 的显示与隐藏

AnimatedVisibility用于管理单个组件是否存在于界面中。

它主要处理：

组件进入（Enter）
组件退出（Exit）

例如：

显示 / 隐藏按钮
展开 / 收起面板
Toast 样式提示出现与消失

它的核心特点是：同一时间只关注一个 Composable。也就是说，它只是决定：

这个组件现在该显示，还是该消失？

AnimatedContent：管理多个内容之间的切换

AnimatedContent 用于在多个不同 Composable 之间做切换动画。

它解决的是：

当前内容退出，同时新内容进入

例如：

Loading → Content
Empty → Data
Login Form → Success Screen

它会自动处理"交接过程"：

旧内容执行退出动画
新内容执行进入动画
两者同步衔接

这种机制可以让状态切换更加自然。

如何选择？可以用一个简单原则判断：

如果只是控制"显示/隐藏" → 用 AnimatedVisibility
如果是"内容替换/状态切换" → 用 AnimatedContent

尤其当底层 Composable 逻辑已经发生变化时，应优先选择 AnimatedContent。

2. 可以将 Transition（第 3 部分介绍的内容）与 AnimatedContent 一起使用吗？

可以，而且这种组合非常强大。

AnimatedContent 提供了一个支持接收 Transition<T> 对象的重载版本。借助它，你可以让内容切换动画和内容内部属性动画保持同步执行，从而实现更加统一、细腻的过渡效果。

这意味着在内容切换的同时，你还可以同步控制组件内部的各种属性变化，例如：

透明度（alpha）
缩放（scale）
位移（offset）
颜色（color）
旋转（rotation）

比如从一个状态切换到另一个状态时，不仅页面内容本身在切换，内部按钮、背景颜色或者图标也可以同时完成动画变化。

这种方式能够让整个过渡过程看起来更加协调一致，形成更完整、更精致的动画体验。

3. CrossFade 支持自定义动画参数吗？

支持，但可配置范围比较有限。

CrossFade 允许通过 animationSpec 来调整动画参数，例如：

kotlin 复制代码

tween(durationMillis = 500)

你可以控制的主要是：

动画时长（duration）

用于决定淡入淡出执行的快慢。

缓动曲线（easing）

用于控制动画节奏，比如：

匀速
先快后慢
先慢后快

不过需要注意的是，CrossFade 只能调整动画的执行方式，不能改变动画的类型。

也就是说，无论你如何配置，它始终都是：

旧内容淡出，同时新内容淡入

这一点和 AnimatedContent 不同。

AnimatedContent 支持更丰富的动画形式，例如：

滑动
缩放
自定义进入动画
自定义退出动画
多种动画组合

而 CrossFade 的定位更加专一，它只负责提供简单直接的淡入淡出效果。

如果你的需求只是让内容切换显得更自然，CrossFade 已经足够；如果需要更复杂、更灵活的过渡效果，则更适合使用 AnimatedContent。

Android Compose 动画实践：内容切换与页面转场

1. 内容切换器：AnimatedContent

工作原理

2. 简单淡入淡出：CrossFade

3. 页面切换动画：Navigation Compose 集成

常见问题

1. 应该使用 AnimatedContent 还是 AnimatedVisibility？

AnimatedContent：管理多个内容之间的切换

2. 可以将 Transition（第 3 部分介绍的内容）与 AnimatedContent 一起使用吗？

3. CrossFade 支持自定义动画参数吗？