如何在 Jetpack Compose 中实现屏幕之间的动画过渡？

Question

我正在尝试在 Jetpack Compose 应用程序中创建一个导航流程，该流程具有屏幕之间平滑的动画过渡，类似于视频中看到的效果。目前，当我从

StartScreen

导航到

LoginScreen

时，

StartScreen

会覆盖

LoginScreen

，这不会产生所需的效果。

@Composable
fun MyAppNavigation(
    modifier: Modifier, authViewModel: AuthViewModel
) {

    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "start") {
        composable(route = "start",
            enterTransition = {
                slideInHorizontally(
                    initialOffsetX = { -500 }, // small slide 300px
                    animationSpec = tween(
                        durationMillis = 1000,
                        easing = FastOutSlowInEasing // interpolator
                    )
                )
            },
            exitTransition = {
                slideOutHorizontally(
                    targetOffsetX = { -500 },
                    animationSpec = tween(
                        durationMillis = 1000,
                        easing = FastOutSlowInEasing
                    )
                )
            }) {
            StartPage(
                modifier = modifier,
                navController = navController,
                authViewModel = authViewModel
            )
        }

        composable(route = "login",
            enterTransition = {
                slideInHorizontally(
                    initialOffsetX = { it }, // it == fullWidth
                    animationSpec = tween(
                        durationMillis = 1000,
                        easing = FastOutSlowInEasing
                    )
                )
            },
            exitTransition = {
                slideOutHorizontally(
                    targetOffsetX = { it },
                    animationSpec = tween(
                        durationMillis = 1000,
                        easing = FastOutSlowInEasing
                    )
                )
            }

        ) {
                LoginPage(
                    modifier = Modifier.fillMaxSize(),
                    navController = navController,
                    authViewModel = authViewModel
                )
        }

        composable("signup") {
            SignupPage(
                modifier = modifier,
                navController = navController,
                authViewModel = authViewModel
            )
        }

        composable("home") {
            HomePage(
                modifier = modifier,
                navController = navController,
                authViewModel = authViewModel
            )
        }


    }
}

这就是我想要实现的目标。

我尝试更改初始偏移量但无法实现。

Answer 1

不要向可组合项添加进入/退出过渡，而是尝试直接将过渡添加到

NavHost

并将其从可组合项中删除。这种方法的另一个优点是，您只需要定义这些过渡效果一次，它将适用于所有内容。

我的代码看起来像这样：

import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.core.tween

const val SCREEN_TRANSITION_MILLIS = 500

NavHost(
    navController = navController,
    startDestination = Screen.HomeTab.route,
    enterTransition = { slideIntoContainer(
        AnimatedContentTransitionScope.SlideDirection.Start, tween(
            SCREEN_TRANSITION_MILLIS
        )
    ) },
    exitTransition = { slideOutOfContainer(
        AnimatedContentTransitionScope.SlideDirection.Start, tween(
            SCREEN_TRANSITION_MILLIS
        )
    ) },
    popEnterTransition = { slideIntoContainer(
        AnimatedContentTransitionScope.SlideDirection.End, tween(
            SCREEN_TRANSITION_MILLIS
        )
    ) },
    popExitTransition = { slideOutOfContainer(
        AnimatedContentTransitionScope.SlideDirection.End, tween(
            SCREEN_TRANSITION_MILLIS
        )
    ) }
) {
    composable(Screen.HomeTab.route) {
        HomeView(
            navController = navController
        )
    }
    composable(Screen.SomeListView.route) {
        SomeListView(
            navController = navController
        )
    }
    // Remaining composables....
}