如何在Jetpack Compose中还原默认Activity切换动画？

效果名称与API说明 #

• 你提到的旧界面变暗效果本质是透明度淡出动画（Fade Out），通常和滑动动画组合实现：旧页面在滑出过程中逐渐降低透明度，视觉上呈现"变暗"的蒙层效果。
• Compose Navigation提供了公开API支持这个效果：在AnimatedContentTransitionScope中，fadeOut()可以和slideOutOfContainer()通过+运算符组合成复合动画，直接实现滑出+变暗的同步效果。

修改后的代码实现 #

只需给旧页面的退出动画添加淡出效果，即可实现你想要的视觉表现：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    val navController = rememberNavController()
                    val animationDuration = 500
                    val startDestinationEnterAnimation: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) = {
                        slideIntoContainer(
                            towards = AnimatedContentTransitionScope.SlideDirection.Right,
                            animationSpec = tween(animationDuration),
                            initialOffset = { it / 2 }
                        ) + fadeIn(animationSpec = tween(animationDuration))
                    }
                    val startDestinationExitAnimation: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) = {
                        // 旧页面滑出时同步淡出（变暗）
                        slideOutOfContainer(
                            towards = AnimatedContentTransitionScope.SlideDirection.Left,
                            animationSpec = tween(animationDuration),
                            targetOffset = { it / 2 }
                        ) + fadeOut(animationSpec = tween(animationDuration))
                    }
                    val destinationEnterAnimation: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> EnterTransition) = {
                        slideIntoContainer(
                            towards = AnimatedContentTransitionScope.SlideDirection.Left,
                            animationSpec = tween(animationDuration),
                        ) + fadeIn(animationSpec = tween(animationDuration))
                    }
                    val destinationExitAnimation: (AnimatedContentTransitionScope<NavBackStackEntry>.() -> ExitTransition) = {
                        slideOutOfContainer(
                            towards = AnimatedContentTransitionScope.SlideDirection.Right,
                            animationSpec = tween(animationDuration),
                        ) + fadeOut(animationSpec = tween(animationDuration))
                    }
                    NavHost(
                        navController = navController,
                        startDestination = Constants.SCREEN_MAIN,
                        builder = {
                            composable(
                                route = Constants.SCREEN_MAIN,
                                enterTransition = startDestinationEnterAnimation,
                                exitTransition = startDestinationExitAnimation
                            ) {
                                MainScreen(
                                    onClickSettings = {
                                        val route = Constants.SCREEN_SETTINGS
                                        navController.navigate(route) {
                                            popUpTo(route) {
                                                inclusive = true
                                            }
                                        }
                                    }
                                )
                            }
                            composable(
                                route = Constants.SCREEN_SETTINGS,
                                enterTransition = destinationEnterAnimation,
                                exitTransition = destinationExitAnimation
                            ) {
                                SettingsScreen(onClickBack = {
                                    if (navController.currentBackStackEntry?.lifecycle?.currentState == Lifecycle.State.RESUMED) {
                                        navController.popBackStack()
                                    }
                                })
                            }
                        }
                    )
                }
            }
        }
    }
}

关键修改点 #

• 给两个页面的exitTransition添加fadeOut()，和滑动动画组合，实现旧页面滑出时同步变暗的效果。
• 可选：给enterTransition添加fadeIn()，让新页面的入场动画更自然，和退出动画形成呼应。

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