android compose NavHost 切换动画

要为Android Compose中的NavHost添加切换动画，可以使用Transition API来实现。以下是一个简单的例子：

首先，确保你已经在build.gradle文件中添加了Transition库的依赖：

dependencies {
    implementation 'androidx.compose.animation:animation:1.0.0'
}

然后，在NavHost周围包裹一个Transition组件，并设置动画效果：

import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.transition
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedNavHost(navController: NavHostController) {
    val transition = transition<NavTransition> {
        // 定义进入和退出动画效果
        slideInHorizontally({ it.offset }) { _, _ -> slideOutHorizontally({ -it.offset }) }
    }

    Surface(color = Color.White) {
        NavHost(navController = navController, startDestination = "screen1") {
            composable("screen1") {
                // 设置进入和退出动画属性
                val enterTransition = transition.animateEnterExit(
                    initial = { NavTransition(1000.dp) },
                    target = { NavTransition(0.dp) }
                )
                val exitTransition = transition.animateEnterExit(
                    initial = { NavTransition(0.dp) },
                    target = { NavTransition(-1000.dp) }
                )

                // 应用进入和退出动画
                transition.AnimatedContent(
                    enterTransition = enterTransition,
                    exitTransition = exitTransition
                ) {
                    Screen1()
                }
            }
            composable("screen2") {
                // 设置进入和退出动画属性
                val enterTransition = transition.animateEnterExit(
                    initial = { NavTransition(-1000.dp) },
                    target = { NavTransition(0.dp) }
                )
                val exitTransition = transition.animateEnterExit(
                    initial = { NavTransition(0.dp) },
                    target = { NavTransition(1000.dp) }
                )

                // 应用进入和退出动画
                transition.AnimatedContent(
                    enterTransition = enterTransition,
                    exitTransition = exitTransition
                ) {
                    Screen2()
                }
            }
        }
    }
}

data class NavTransition(val offset: Dp)

@Composable
fun Screen1() {
    // 屏幕1的内容
}

@Composable
fun Screen2() {
    // 屏幕2的内容
}

在上面的例子中，我们使用slideInHorizontally和slideOutHorizontally定义了从左到右的进入和退出动画。然后，我们在NavHost中使用transition.AnimatedContent应用了这些动画效果。

最后，我们可以在Compose的UI中使用AnimatedNavHost：

@Composable
fun App() {
    val navController = rememberNavController()
    AnimatedNavHost(navController = navController)
}

这样，当你使用NavHost的navigate方法切换到不同的目标屏幕时，就会应用定义好的切换动画了