「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

官方的解释:
在Compose层次结构中提供适当的位置，以便进行自包含导航。 一旦调用它，就可以从提供的NavGraphBuilder导航到给定NavGraphBuilder中的任何可组合项。 传递给此方法的生成器将被记住。这意味着对于该NavHost，生成器的内容无法更改。

AnimatedNavHost有10个参数

1. navController是NavController的子类，提供额外的API供NavHost用于将NavController连接到外部依赖项。应用程序通常不应该构造控制器，而是通过NavHost直接从导航主机获取相关控制器。getNavController或使用导航类上的一个实用程序方法。
2. startDestination 起始的路线，可以理解为Tag,根据它判断当前页面
3. modifier 这个太常见了 大家都懂（主要是不太好解释）
4. contentAlignment内容对齐的方向 Alignment
5. route 图形的路径
6. enterTransition 我理解为开始过度的逻辑 可以通过animationSpec设置持续时间
7. exitTransition 我理解为退出逻 8.popEnterTransition目标的PopCenter转换的回调 9.popExitTransition 目标的popExit转换的回调 10.builder用来构造图形的生成器

使用之前还要了解rememberAnimatedNavController

用来创建一个NavHostController，用于处理ComposeNavigator、DialogNavigator和AnimatedComposeNavigator的添加。

开始使用

private const val A="a"
private const val B="b"
AnimatedNavHost(
  val navController = rememberAnimatedNavController()
    navController,
    startDestination = A,//设置Aui为开始界面
    enterTransition = {
        fadeIn(animationSpec = tween(700), initialAlpha = 0f)
    },
    exitTransition = {
        fadeOut(animationSpec = tween(700), initialAlpha = 0f)
    }
)

动画

淡入和淡出

fadeIn(animationSpec = tween(700), initialAlpha = 0f)

fadeOut(animationSpec = tween(700), initialAlpha = 0f)

膨胀和收缩

expandIn(
    animationSpec = tween(700),
    expandFrom = Alignment.BottomEnd,
    initialSize = { IntSize(666, 999) }

exitTransition = {
    shrinkOut(animationSpec = tween(700),
        targetSize = { IntSize(777, 999) })
}

initialSize:扩展边界的起始大小，默认情况下返回'IntSize（0，0）。
targetSize:返回收缩边界的结束大小，默认情况下为IntSize（0，0）。

放大和缩小

scaleIn(animationSpec = tween(777 initialScale = 0f//初始缩放大小,
transformOrigin = TransformOrigin(0f,0f)//设置动画缩放的基准点)

scaleOut(animationSpec = tween(777), targetScale = 0f, transformOrigin = TransformOrigin(1f,1f))

接着

AnimatedNavHost(
    ...
) {
    composable(
        A,
    ) { Aui() }

    composable(
        B,
    ) { Bui() }
}

就是开始定义界面A和B的Tag
private const val A="a"
private const val B="b"
Aui()和Bui()就是composable界面
我还是写出来把

@Composable
fun Aui()(r) {
    Column(
        Modifier
            .fillMaxSize()
            .background(Color.Cyan)
    ) {
       Text("A")

    }
}
@Composable
fun Bui()() {
    Column(
        Modifier
            .fillMaxSize()
            .background(Color.Cyan)
    ) {
       Text("B")

    }
}

切换到B界面

navController.navigate(B) 

特殊动画需求

如果有特殊动画需求可以把composable放在navigation下面

AnimatedNavHost(
        navController,
startDestination = A,
...
) {

    composable(
        A,
    ) { Aui() }

    navigation(
        startDestination = B,
        route = "Inner",
        enterTransition = {
            expandIn(
                animationSpec = tween(70),
                expandFrom = Alignment.BottomEnd,
                initialSize = { IntSize(66, 99) } )
        },
        exitTransition = {
            shrinkOut(animationSpec = tween(70),
                targetSize = { IntSize(77, 99) })
        }
    ) {
      
        composable(
            B
        ) {Bui }

    }
}