Как добиться анимированных переходов между экранами в Jetpack Compose? ⇐ Android

[Anonymous]

Я пытаюсь создать в своем приложении 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
)
}

}
}

Это то, чего я хочу достичь.
[img]https://i.sstatic .net/Mkr0AhpB.gif[/img]

Я пытался изменить числа начального смещения, но не смог этого добиться.

Подробнее здесь: https://stackoverflow.com/questions/790 ... ck-compose