页面导航动画是啥
Compose的页面导航动画就相当于Activity中的页面切换动画，例如打开Activity时候进入的动画，关闭Activity时候的退出动画。
后文所有提到导航的部分，都是指得Compose导航。
页面导航实现的现状
官方正式版的导航中并没有提供导航的动画，但是可能官方也发现了这个问题，因此官方目前正在开发独立于主框架的依赖项目（com.google.accompanist:accompanist-navigation-animation）方便开发者使用导航。
依赖目前最新版本是：com.google.accompanist:accompanist-navigation-animation:0.21.1-beta，本文使用0.21.1-beta版本进行演示，0.16.0的版本和当前版本差异较大，所以不再演示。
需要重点说明的是，导航动画的api目前都是实验性质的api，不过我认为不久的将来这些都会转正，只不过是个别的api可能会有大调整，这不可避免。
Compose中页面导航动画种类
Compose的导航动画提供了两个基础接口EnterTransition和ExitTransition用于提供进入页面导航动画和退出页面导航动画。并且提供了多个现成的实现效果供开发者方便使用，平时开发使用现成的实现基本就可以满足大部分需求。
动画基础类
进入动画：EnterTransition退出动画：ExitTransition
滑动进入退出类型
滑动进入动画：基础的进入动画是slideIn，并且派生出slideInHorizontally和slideInVertically滑动退出动画：基础的退出动画是slideOut，并且派生出slideOutHorizontally和slideOutVertically
淡入淡出类型
淡入动画：fadeIn，无派生淡出动画：fadeOut，无派生
膨胀收缩类型
膨胀进入动画：expandHorizontally和expandVertically收缩退出动画：shrinkHorizontally和shrinkVertically
放大和缩放类型
缩放进入动画：scaleIn缩放推出的桑：scaleOut
使用导航动画发方式
- 添加依赖
implementation "com.google.accompanist:accompanist-navigation-animation:0.21.1-beta" 复制代码
- 导航类代码
enterTransition和exitTransition分别可以设置进入动画和退出动画。
composable中也是可以为单独的页面设置导航动画的
AnimatedNavHost(navController = controller, startDestination = home, enterTransition = { enterAnim(flag.value) }, exitTransition = { exitAnim(flag.value) }) { composable(home) { Home(controller, flag) } composable(main) { Main(controller, flag) } } 复制代码
- NavHostController选择
val controller = rememberAnimatedNavController() 复制代码
- 编写具体进入退出的动画
后续章节放代码
几种动画的实现和效果
后续几个效果只选用我代码实现中的几种实现举例，具体使用大同小异。
滑动进入和滑动退出
代码
进入动画
slideInHorizontally(animationSpec = tween(1000),//动画时长1s initialOffsetX = { -it//初始位置在负一屏的位置，也就是说初始位置我们看不到，动画动起来的时候会从负一屏位置滑动到屏幕位置 }) 复制代码
退出动画
slideOutHorizontally(animationSpec = tween(1000), targetOffsetX = { it }) 复制代码
效果
淡入和退出
代码
进入动画
fadeIn(animationSpec = tween(1000), initialAlpha = 0f) 复制代码
退出动画
fadeOut(animationSpec = tween(1000), targetAlpha = 0f) 复制代码
效果
膨胀进入和收缩退出
代码
膨胀动画
expandIn(animationSpec = tween(1000), expandFrom = Alignment.TopStart){ IntSize(0,0) } 复制代码
收缩动画
shrinkOut(animationSpec = tween(1000), shrinkTowards = Alignment.BottomEnd) {//缩小80% it*4/5 } 复制代码
效果
放大进入和缩小退出
代码
进入动画
scaleIn(animationSpec = tween(1000), initialScale = 0f//初始缩放大小, transformOrigin = TransformOrigin(0f,0f)//设置动画缩放的基准点) 复制代码
退出动画
scaleOut(animationSpec = tween(1000), targetScale = 0f, transformOrigin = TransformOrigin(1f,1f)) 复制代码
效果
