Jetpack Compose导航动画

页面导航动画是啥

Compose的页面导航动画就相当于Activity中的页面切换动画，例如打开Activity时候进入的动画，关闭Activity时候的退出动画。

后文所有提到导航的部分，都是指得Compose导航。

页面导航实现的现状

官方正式版的导航中并没有提供导航的动画，但是可能官方也发现了这个问题，因此官方目前正在开发独立于主框架的依赖项目（com.谷歌.accompanist:accompanist-navigation-animation）方便开发者使用导航。

依赖目前最新版本是：com.谷歌.accompanist:accompanist-navigation-animation:0.21.1-beta，本文使用0.21.1-beta版本进行演示，0.16.0的版本和当前版本差异较大，所以不再演示。

需要重点说明的是，导航动画的api目前都是实验性质的api，不过我认为不久的将来这些都会转正，只不过是个别的api可能会有大调整，这不可避免。

Compose中页面导航动画种类

Compose的导航动画提供了两个基础接口EnterTransition和ExitTransition用于提供进入页面导航动画和退出页面导航动画。并且提供了多个现成的实现效果供开发者方便使用，平时开发使用现成的实现基本就可以满足大部分需求。

动画基础类

1. 进入动画： EnterTransition

2. 退出动画： ExitTransition

滑动进入退出类型

1. 滑动进入动画：基础的进入动画是slideIn，并且派生出slideInHorizontally和slideInVertically

2. 滑动退出动画：基础的退出动画是slideOut，并且派生出slideOutHorizontally和slideOutVertically

淡入淡出类型

1. 淡入动画： fadeIn，无派生

2. 淡出动画： fadeOut，无派生

膨胀收缩类型

1. 膨胀进入动画： expandHorizontally和expandVertically

2. 收缩退出动画： shrinkHorizontally和shrinkVertically

放大和缩放类型

1. 缩放进入动画： scaleIn

2. 缩放推出的桑： scaleOut

使用导航动画发方式

1. 添加依赖

implementation "com.谷歌.accompanist:accompanist-navigation-animation:0.21.1-beta"

2. 导航类代码
   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)
        }
    }

3. NavHostController选择

val controller = rememberAnimatedNavController()

4. 编写具体进入退出的动画

后续章节放代码

几种动画的实现和效果

后续几个效果只选用我代码实现中的几种实现举例，具体使用大同小异。

滑动进入和滑动退出

代码

进入动画

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))

效果

这篇好文章是转载于：学新通技术网