What the page navigation animation is

Compose’s page navigation animation is the equivalent of the page-switching animation in your Activity, such as the animation that enters when you start the Activity and the animation that exits when you close it.

All navigation references below refer to the Compose navigation.

Current state of page navigation implementation

Navigation animations are not available in the official version of navigation, but perhaps the official version is aware of this problem, So officials are currently developing separately from the main framework depends on the project (com. Google. Accompanist: accompanist – navigation – animation) convenient developers use navigation.

The latest version of the dependency is: Com. Google. Accompanist: accompanist – navigation – animation: 0.21.1 – beta, this article USES 0.21.1 – beta version, 0.16.0 version and the current version of the difference is bigger, so not shown.

It’s important to note that the navigation animation API is currently experimental, but I think it will be in the near future, but it’s inevitable that there will be major changes to individual apis.

Compose page navigation animation category

Compose’s navigation animation provides two basic interfaces, EnterTransition and ExitTransition, to provide the entry and exit navigation animations. And provides a number of ready-made implementation effects for developers to facilitate the use of peacetime development using ready-made implementation can basically meet most of the needs.

Animation Basics

  1. Enter the animation: EnterTransition

  2. Exit animation: ExitTransition

Slide into the exit type

  1. Slide into animation: The basic entry animation is slideIn, which derives from slideInHorizontally and slideInVertically

  2. Slide Exit Animation: The base exit animation is slideOut, and derives from slideOutHorizontally and slideOutVertically

Fade in and out type

  1. Fade animation: fadeIn, no derivation

  2. FadeOut animation: fadeOut, no derivation

Expansion contraction type

  1. ExpandHorizontally and expandVertically

  2. ShrinkHorizontally and shrinkVertically

Zoom in and out of types

  1. Zoom into animation: scaleIn

  2. Zoom out: scaleOut

Use navigation animation mode

  1. Add the dependent

implementation "Com. Google. Accompanist: accompanist - navigation - animation: 0.21.1 - beta"
Copy the code
  1. Navigation class code

EnterTransition and exitTransition can be set to enter and exit animations, respectively.

Navigation animations for individual pages are also available in the Composable

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

        composable(home) {
            Home(controller, flag)
        }
        composable(main) {
            Main(controller, flag)
        }
    }
Copy the code
  1. NavHostController choice
val controller = rememberAnimatedNavController()
Copy the code
  1. Animate the entry and exit

The following sections put the code

Several animation implementations and effects

The following several effects only choose my code implementation of several implementation examples, the specific use of similar.

Slide in and slide out

code

Enter the animation

slideInHorizontally(animationSpec = tween(1000),// Animation duration 1s initialOffsetX = {
                -it// The initial position is in the negative screen position, which means that we can't see the initial position. When the animation moves, it slides from the negative screen position to the screen position
            })
Copy the code

Exit the animation

 slideOutHorizontally(animationSpec = tween(1000), targetOffsetX = {
                it
            })
Copy the code

The effect

Fade in and out

code

Enter the animation

fadeIn(animationSpec = tween(1000), initialAlpha = 0f)
Copy the code

Exit the animation

fadeOut(animationSpec = tween(1000), targetAlpha = 0f)
Copy the code

The effect

Expansion in and contraction out

code

Expansion of the animation

expandIn(animationSpec = tween(1000), expandFrom = Alignment.TopStart){
                IntSize(0.0)}Copy the code

Contraction of the animation

shrinkOut(animationSpec = tween(1000), shrinkTowards = Alignment.BottomEnd) {/ / to shrink 80%
                it*4/5
            }
Copy the code

The effect

Zoom in and zoom out

code

Enter the animation

scaleIn(animationSpec = tween(1000), initialScale = 0f// Initial zoom size,
transformOrigin = TransformOrigin(0f.0f)// Set the base point for animation scaling.
Copy the code

Exit the animation

scaleOut(animationSpec = tween(1000), targetScale = 0f, transformOrigin = TransformOrigin(1f.1f))
Copy the code

The effect