如何在Compose导航中实现Composables间的页面切换动画？

嘿，我刚好也折腾过Compose Navigation的页面过渡动画，其实没你想的那么复杂，核心就是利用导航组件提供的动画参数，或者结合Compose的状态式动画逻辑来实现，刚好给你梳理几个实用的方案：

方法一：用NavHost内置的过渡参数快速实现 #

Compose Navigation从1.7.0版本开始，已经在composable路由定义里内置了设置过渡的入口，你只需要指定enterTransition、exitTransition、popEnterTransition和popExitTransition这几个参数就行。这些参数接受Compose动画API提供的EnterTransition/ExitTransition类型，比如滑动、淡入淡出这些基础动画都可以直接用。

举个最常见的“左右滑动切换”例子：前进时新页面从右侧滑入，旧页面滑出到左侧；返回时动画反向，让交互更符合用户习惯：

NavHost(navController = navController, startDestination = "home") {
    // 首页路由
    composable("home") {
        HomeScreen(onNavigateToDetail = { navController.navigate("detail") })
    }
    // 详情页路由，配置过渡动画
    composable(
        route = "detail",
        enterTransition = {
            // 进入动画：从屏幕右侧滑入，同时淡入
            slideInHorizontally(initialOffsetX = { it }) + fadeIn()
        },
        exitTransition = {
            // 退出动画：滑出到屏幕左侧，同时淡出
            slideOutHorizontally(targetOffsetX = { -it }) + fadeOut()
        },
        popEnterTransition = {
            // 返回时的进入动画：从左侧滑入（对应详情页返回首页）
            slideInHorizontally(initialOffsetX = { -it }) + fadeIn()
        },
        popExitTransition = {
            // 返回时的退出动画：滑出到右侧
            slideOutHorizontally(targetOffsetX = { it }) + fadeOut()
        }
    ) {
        DetailScreen(onBackClick = { navController.popBackStack() })
    }
}

这里要重点注意：popEnterTransition和popExitTransition是专门处理从返回栈回到上一页的动画，必须和前进动画对应，否则返回时的动画会很突兀。

方法二：用AnimatedContent自定义复杂过渡 #

如果内置参数满足不了你的需求（比如要根据页面内容状态做动画，或者给特定路由对设置专属过渡），可以结合AnimatedContent和导航的当前路由状态来实现完全自定义的动画逻辑。

步骤很简单：先获取当前的路由状态，然后用AnimatedContent包裹页面组件，在transitionSpec里定义不同路由切换时的动画规则：

// 记住当前的路由状态
val currentRoute by navController.currentBackStackEntryAsState()
val currentDestination = currentRoute?.destination?.route ?: "home"

AnimatedContent(
    targetState = currentDestination,
    transitionSpec = {
        // 定义不同路由切换的动画规则
        when {
            // 从home跳转到detail的动画
            targetState == "detail" && initialState == "home" ->
                slideInHorizontally(initialOffsetX = { it }) + fadeIn() with
                slideOutHorizontally(targetOffsetX = { -it }) + fadeOut()
            // 从detail返回home的动画
            targetState == "home" && initialState == "detail" ->
                slideInHorizontally(initialOffsetX = { -it }) + fadeIn() with
                slideOutHorizontally(targetOffsetX = { it }) + fadeOut()
            // 默认过渡：其他路由切换用淡入淡出
            else -> fadeIn() with fadeOut()
        }
    }
) { route ->
    when (route) {
        "home" -> HomeScreen(onNavigateToDetail = { navController.navigate("detail") })
        "detail" -> DetailScreen(onBackClick = { navController.popBackStack() })
    }
}

这种方式的优势是完全可控，你可以给任意两个路由之间设置独特的过渡效果，甚至结合页面内的状态做更复杂的动画联动。

进阶：共享元素过渡（可选） #

如果需要实现类似“图片从首页无缝过渡到详情页”的共享元素动画，可以用官方推荐的accompanist-navigation-animation库（需要额外添加依赖），它提供了AnimatedNavHost和共享元素的支持：

// 先添加依赖到build.gradle
// implementation "com.google.accompanist:accompanist-navigation-animation:<latest-version>"

AnimatedNavHost(navController = navController, startDestination = "home") {
    composable("home") {
        HomeScreen { itemId, sharedImage ->
            navController.navigate("detail/$itemId") {
                // 添加共享元素，指定唯一的key
                addSharedElement(sharedImage, "shared_image_$itemId")
            }
        }
    }
    composable("detail/{itemId}") { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailScreen(itemId = itemId, onBackClick = { navController.popBackStack() })
    }
}

在页面组件里，你需要用Modifier.sharedElement()标记共享的UI元素，比如：

// 首页的图片
Image(
    painter = painterResource(id = R.drawable.item_image),
    contentDescription = null,
    modifier = Modifier
        .size(100.dp)
        .sharedElement(rememberSharedElementState(key = "shared_image_$itemId"))
)

内容的提问来源于stack exchange，提问作者Ahmad Sattout