Jetpack Compose导航动画

·  阅读 593

页面导航动画是啥

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的导航动画提供了两个基础接口EnterTransitionExitTransition用于提供进入页面导航动画和退出页面导航动画。并且提供了多个现成的实现效果供开发者方便使用,平时开发使用现成的实现基本就可以满足大部分需求。

动画基础类

  1. 进入动画: EnterTransition

  2. 退出动画: ExitTransition

滑动进入退出类型

  1. 滑动进入动画:基础的进入动画是slideIn,并且派生出slideInHorizontallyslideInVertically

  2. 滑动退出动画:基础的退出动画是slideOut,并且派生出slideOutHorizontallyslideOutVertically

淡入淡出类型

  1. 淡入动画: fadeIn,无派生

  2. 淡出动画: fadeOut,无派生

膨胀收缩类型

  1. 膨胀进入动画: expandHorizontallyexpandVertically

  2. 收缩退出动画: shrinkHorizontallyshrinkVertically

放大和缩放类型

  1. 缩放进入动画: scaleIn

  2. 缩放推出的桑: scaleOut

使用导航动画发方式

  1. 添加依赖

implementation "com.google.accompanist:accompanist-navigation-animation:0.21.1-beta"
复制代码
  1. 导航类代码

enterTransitionexitTransition分别可以设置进入动画和退出动画。

composable中也是可以为单独的页面设置导航动画的

AnimatedNavHost(navController = controller,
        startDestination = home,
        enterTransition = {
            enterAnim(flag.value)
        },
        exitTransition = {
            exitAnim(flag.value)
        }) {

        composable(home) {
            Home(controller, flag)
        }
        composable(main) {
            Main(controller, flag)
        }
    }
复制代码
  1. NavHostController选择
val controller = rememberAnimatedNavController()
复制代码
  1. 编写具体进入退出的动画

后续章节放代码

几种动画的实现和效果

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

滑动进入和滑动退出

代码

进入动画

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))
复制代码

效果

放大进入和缩放退出动画

git: github.com/ananananzhu…

分类:
Android
分类:
Android
收藏成功!
已添加到「」, 点击更改