我用JetPack Compose 搭建的项目,有用到Navigation, 有20个页面,我想为每个页面都添加上转场动画
时间: 2023-05-17 11:03:50 浏览: 40
非常好的问题!您可以使用Compose提供的Transition组件来为每个页面添加转场动画。您可以使用Slide、Fade、Scale等不同的动画效果,具体实现方式可以参考Compose官方文档或者相关的教程。以下是一个简单的示例代码:
```kotlin
@Composable
fun MyScreen() {
val navController = rememberNavController()
val transition = updateTransition(targetState = navController.currentBackStackEntry?.destination?.route)
val slideLeft by transition.animateDp(
transitionSpec = {
slideInHorizontally(
initialOffsetX = { fullWidth -> fullWidth },
animationSpec = tween(durationMillis = 300)
) + fadeIn(animationSpec = tween(durationMillis = 300))
}
) { route ->
route?.let {
when (it) {
"page1" -> 0.dp
"page2" -> -fullWidth
else -> 0.dp
}
} ?: 0.dp
}
val slideRight by transition.animateDp(
transitionSpec = {
slideInHorizontally(
initialOffsetX = { -fullWidth },
animationSpec = tween(durationMillis = 300)
) + fadeIn(animationSpec = tween(durationMillis = 300))
}
) { route ->
route?.let {
when (it) {
"page1" -> fullWidth
"page2" -> 0.dp
else -> 0.dp
}
} ?: 0.dp
}
NavHost(navController = navController, startDestination = "page1") {
composable("page1") {
Box(
Modifier
.fillMaxSize()
.offset(x = slideLeft)
) {
// Your page content
}
}
composable("page2") {
Box(
Modifier
.fillMaxSize()
.offset(x = slideRight)
) {
// Your page content
}
}
// Add more pages here
}
}
```
这段代码实现了两个页面之间的左右滑动动画,您可以根据需要修改动画效果和页面数量。希望对您有所帮助!