Reputation: 2476

Animating between Composables in Navigation with Compose

I have started trying out Navigation for compose.

I created my 2 Composables and everything is working fine.

But what I'm missing is Animations (or Transitions) between the pages. I didn't find any resources pointing out how to do it in Compose.

I know all animations are based on states in Compose, but the only thing I know is the Navigation Back Stack.

Upvotes: 21

Answers (8)

dessalines

Reputation: 7372

The current answers, as of July 2024, are all incorrect. A simple way to do this is to add this to your NavHost :

enterTransition = {
    slideIntoContainer(
        towards = AnimatedContentTransitionScope.SlideDirection.Left,
        animationSpec = tween(700)
    )
},
exitTransition = {
    slideOutOfContainer(
        towards = AnimatedContentTransitionScope.SlideDirection.Left,
        animationSpec = tween(700)
    )
},
popEnterTransition = {
    slideIntoContainer(
        towards = AnimatedContentTransitionScope.SlideDirection.Right,
        animationSpec = tween(700)
    )
},
popExitTransition = {
    slideOutOfContainer(
        towards = AnimatedContentTransitionScope.SlideDirection.Right,
        animationSpec = tween(700)
    )
}

Upvotes: 8

Константин Семочкин

Reputation: 689

You can use the composable I made to show enter animation (configure preferable effects in "enter" and "exit" parameters)

@Composable
fun EnterAnimation(content: @Composable () -> Unit) {
    AnimatedVisibility(
        visibleState = MutableTransitionState(
            initialState = false
        ).apply { targetState = true },
        modifier = Modifier,
        enter = slideInVertically(
            initialOffsetY = { -40 }
        ) + expandVertically(
            expandFrom = Alignment.Top
        ) + fadeIn(initialAlpha = 0.3f),
        exit = slideOutVertically() + shrinkVertically() + fadeOut(),
    ) {
        content()
    }
}

You can use it like this:

NavHost(
    navController = navController,
    startDestination = "dest1"
) {
    composable("dest1") {
        EnterAnimation {
            FirstScreen(navController)
        }
    }
    composable("dest2") {
        EnterAnimation {
            SecondScreen(navController)
        }
    }
}

Upvotes: 16

quealegriamasalegre

Reputation: 3258

From now on all the functionality in the accompanist library has been portet to the official compose NavHost navigation library. See the following. hence there is no longer a need to use accompanist.

Upvotes: 4

Vlad Diachuk

Reputation: 1

You can use the library I did. It provides easy navigation and is written using AnimatedVisibility so you can use compose transitions to animate any screen state (enter, exit) https://github.com/vldi01/AndroidComposeRouting

Upvotes: 0

ckunder

Reputation: 2300

Accompanist version 0.16.1 and above supports animation between destinations. Here is the article for more info.

implementation("com.google.accompanist:accompanist-navigation-animation:0.16.1")

import com.google.accompanist.navigation.animation.AnimatedNavHost
import com.google.accompanist.navigation.animation.composable
import com.google.accompanist.navigation.animation.rememberAnimatedNavController


val navController = rememberAnimatedNavController()

AnimatedNavHost(navController, startDestination = "first") {
    composable(
        route = "first",
        enterTransition = { _, _ -> slideInHorizontally(animationSpec = tween(500)) },
        exitTransition = { _, _ -> slideOutHorizontally(animationSpec = tween(500)) }
    ) {
       FirstScreen()
    }
    composable(
        route = "second",
        enterTransition = { _, _ -> slideInHorizontally(initialOffsetX = { it / 2 }, animationSpec = tween(500)) },
        exitTransition = { _, _ -> slideOutHorizontally(targetOffsetX = { it / 2 }, animationSpec = tween(500)) }
    ) {
       SecondScreen()
    }
}

Result: