Jetpack Compose中如何实现NavHost返回导航的反向自定义过渡动画

核心思路 #

通过判断导航操作是前进（push）还是返回（pop），动态切换动画的缩放参数，同时修正返回导航的正确调用方式，实现前进和返回时的对称动画效果。

步骤1：重构动画函数，支持正向/反向参数 #

将原有动画函数改为可接收方向参数的形式，根据前进/返回状态调整缩放值：

// 通用缩放淡入动画，适配正向/反向导航
fun zoomTransition(isForward: Boolean): EnterTransition {
    val initialScale = if (isForward) 0.85f else 1.15f
    return scaleIn(
        initialScale = initialScale,
        animationSpec = tween(
            durationMillis = 250,
            easing = FastOutSlowInEasing
        )
    ) + fadeIn(
        animationSpec = tween(
            durationMillis = 250,
            easing = FastOutSlowInEasing
        )
    )
}

// 通用缩放淡出动画，适配正向/反向导航
fun zoomOutTransition(isForward: Boolean): ExitTransition {
    val targetScale = if (isForward) 1.15f else 0.85f
    return scaleOut(
        targetScale = targetScale,
        animationSpec = tween(
            durationMillis = 250,
            easing = FastOutSlowInEasing
        )
    ) + fadeOut(
        animationSpec = tween(
            durationMillis = 250,
            easing = FastOutSlowInEasing
        )
    )
}

步骤2：在NavHost中根据导航方向切换动画 #

利用composable函数的transition参数中提供的导航状态，判断当前操作是否为返回，再选择对应动画：

@Composable
fun NavigationAnimation(){
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = HomeScreen,
    ){
        composable<HomeScreen>(
            enterTransition = {
                // 进入HomeScreen时，若为返回操作则用反向动画
                zoomTransition(isForward = !targetState.destination.isPop)
            },
            exitTransition = {
                // 从HomeScreen前进到AboutScreen时用正向动画
                zoomOutTransition(isForward = true)
            }
        ){
            HomeScreen(
                onClickGoAboutScreen = {
                    navController.navigate(AboutScreen)
                }
            )
        }

        composable<AboutScreen>(
            enterTransition = {
                // 前进进入AboutScreen时用正向动画
                zoomTransition(isForward = true)
            },
            exitTransition = {
                // 从AboutScreen返回HomeScreen时用反向动画
                zoomOutTransition(isForward = false)
            }
        ){
            AboutScreen(
                onClickGoHomeScreen = {
                    // 修正：返回需用popBackStack，避免重复入栈
                    navController.popBackStack()
                }
            )
        }
    }
}

关键细节说明 #

• 导航方向判断：targetState.destination.isPop用于识别当前是否为返回栈操作，以此区分前进和返回行为。
• 返回逻辑修正：原代码中navigate(HomeScreen)会在栈中新增HomeScreen实例，改用popBackStack()才是符合导航栈规则的返回方式，同时能触发正确的返回动画判断。
• 动画复用：通过isForward参数统一控制缩放参数，减少重复代码，保证前进/返回动画的对称一致性。

内容的提问来源于stack exchange，提问作者Mehedi Hasan