Jetpack Compose页面转场动画异常问题及正确实现方案咨询

问题根源 #

你仅为第二、第三页配置了enterTransition（前进时页面的进入动画）和popExitTransition（后退时页面的退出动画），但未明确设置popEnterTransition（后退时前一页的进入动画）和exitTransition（前进时当前页的退出动画）。返回时第二页的进入动画会使用系统默认逻辑，和第三页的退出动画时序、方向不匹配，最终导致视觉混乱。

正确实现方式 #

为每个页面完整配置四个过渡动画，确保前进、后退流程中，页面的进入/退出动画逻辑统一、时序同步：

1. 统一动画参数（复用代码） #

先定义通用的动画规格，避免重复编写：

// 通用动画时长与缓动曲线
private const val TRANSITION_DURATION = 600
private val DEFAULT_EASING = FastOutSlowInEasing

// 前进动画：新页面从右侧滑入+淡入
private fun forwardEnterTransition() = slideInHorizontally(
    initialOffsetX = { it }, // 初始位置为屏幕右侧
    animationSpec = tween(TRANSITION_DURATION, easing = DEFAULT_EASING)
) + fadeIn(animationSpec = tween(TRANSITION_DURATION))

// 前进动画：当前页面滑出左侧+淡出
private fun forwardExitTransition() = slideOutHorizontally(
    targetOffsetX = { -it }, // 目标位置为屏幕左侧
    animationSpec = tween(TRANSITION_DURATION, easing = DEFAULT_EASING)
) + fadeOut(animationSpec = tween(TRANSITION_DURATION))

// 后退动画：当前页面滑出右侧+淡出
private fun backwardExitTransition() = slideOutHorizontally(
    targetOffsetX = { it }, // 目标位置为屏幕右侧
    animationSpec = tween(TRANSITION_DURATION, easing = DEFAULT_EASING)
) + fadeOut(animationSpec = tween(TRANSITION_DURATION))

// 后退动画：前一页从左侧滑入+淡入
private fun backwardEnterTransition() = slideInHorizontally(
    initialOffsetX = { -it }, // 初始位置为屏幕左侧
    animationSpec = tween(TRANSITION_DURATION, easing = DEFAULT_EASING)
) + fadeIn(animationSpec = tween(TRANSITION_DURATION))

2. 为每个页面配置完整过渡 #

以第二页（SEARCH_DETAILS_SCREEN）和第三页为例，在composable中完整设置四个过渡：

// 第二页配置
composable(
    route = Screens.SEARCH_DETAILS_SCREEN.name + "/{name}/{type}",
    arguments = listOf(
        navArgument("name") { type = NavType.StringType },
        navArgument("type") { type = NavType.StringType }
    ),
    enterTransition = { forwardEnterTransition() },
    exitTransition = { forwardExitTransition() },
    popEnterTransition = { backwardEnterTransition() },
    popExitTransition = { backwardExitTransition() }
) {
    // 页面内容实现
}

// 第三页配置（逻辑与第二页一致）
composable(
    route = Screens.THIRD_SCREEN.name,
    enterTransition = { forwardEnterTransition() },
    exitTransition = { forwardExitTransition() },
    popEnterTransition = { backwardEnterTransition() },
    popExitTransition = { backwardExitTransition() }
) {
    // 页面内容实现
}

3. 可选：全局默认过渡配置 #

如果所有页面的转场逻辑一致，可以在NavHost层级设置全局默认过渡，减少重复代码：

NavHost(
    navController = navController,
    startDestination = Screens.FIRST_SCREEN.name,
    enterTransition = { forwardEnterTransition() },
    exitTransition = { forwardExitTransition() },
    popEnterTransition = { backwardEnterTransition() },
    popExitTransition = { backwardExitTransition() }
) {
    // 各个页面的composable配置（无需再单独设置过渡）
}

额外优化建议 #

• 保持所有动画的时长、缓动曲线完全一致，避免视觉不协调
• 若部分页面需要特殊动画，可在对应composable中单独覆盖全局配置，其余页面沿用全局逻辑
• 测试时注意导航栈的层级变化，确保动画方向与用户预期的前进/后退逻辑匹配（比如前进从右入，后退从右出）

内容的提问来源于stack exchange，提问作者Himanshu Arya