Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to achieve Android Compose page switching animation". In daily operation, I believe many people have doubts about how to achieve Android Compose page switching animation. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to achieve Android Compose page switching animation". Next, please follow the editor to study!

Start trying.

In fact, the Navigation in Compose is changed by the Navigation in the previous Jetpack, so the previous api still exists.

Then try it on!

NavController.navigate (route) {anim {enter = R.anim.in_from_right exit = R.anim.out_to_left popEnter = R.anim.in_from_right popExit = R.anim.out_to_left}}

Then I had the above code to try. In fact, I thought I couldn't do it when I wrote it, because animation in Compose has its own set of implementation, which is not the xml file placed in the anim folder as before, but I still have a try and finally find out. Sure enough, I can't.

So he started a random search, and later found that it had been written down in the official document:

Note: anim blocks cannot be used with Navigation Compose. The system tracks the conversion animation in Navigation Compose in this feature request.

And then there was no more, and then I started waiting. This is a long time to wait. (as a matter of fact, this article was written before, but it was never posted)

Finally, some time ago, the problem came to light. Instead of putting this feature into the Navigation library, Google recreated a library: navigation-animation, which can be introduced and used at the same time.

Start code

The first thing you need to do is definitely add dependencies:

Now add to the application-level build.gradle:

Repositories {mavenCentral ()}

Then add to the build.gradle at the Module level:

/ / Navigation animation implementation "com.google.accompanist:accompanist-navigation-animation:$accompanist_version"

The next thing you need to do is to migrate the Navigation code you wrote before. Let's take a look at the previous writing:

ExperimentalPagingApi@Composablefun NavGraph (startDestination: String = MainDestinations.HOME_PAGE_ROUTE) {val navController = rememberNavController () val actions = remember (navController) {MainActions (navController)} NavHost (navController = navController, startDestination = startDestination) {composable (MainDestinations.HOME_PAGE_ROUTE) {Home (actions)}

The migration that needs to be done are:

Replace rememberNavController () with rememberAnimatedNavController ()

Replace NavHost with AnimatedNavHost

Replace import androidx.navigation.compose.navigation with import com.google.accompanist.navigation.animation.navigation

Replace import androidx.navigation.compose.composable with import com.google.accompanist.navigation.animation.composable

Come on, then:

OptIn (ExperimentalAnimationApi::class, ExperimentalPagerApi::class) @ Composablefun NavGraph (startDestination: String = PlayDestinations.HOME_PAGE_ROUTE,) {val navController = rememberAnimatedNavController () val actions = remember (navController) {PlayActions (navController)} AnimatedNavHost (navController = navController, startDestination = startDestination) {setComposable (PlayDestinations.HOME_PAGE_ROUTE) {WeatherViewPager (toCityList = actions.toCityList) ToWeatherList = actions.toWeatherList)}

Let's take a look at how to use this library to animate switching between pages:

ExperimentalAnimationApipublic fun NavGraphBuilder.navigation (startDestination: String, route: String, enterTransition: (AnimatedContentScope. ()-> EnterTransition?)? = null, exitTransition: (AnimatedContentScope. ()-> ExitTransition?)? = null, popEnterTransition: (AnimatedContentScope. ()-> EnterTransition?)? = enterTransition, popExitTransition: (AnimatedContentScope. ()-> ExitTransition?)? = exitTransition, builder: NavGraphBuilder. ()-> Unit)

The above code is the source code in the navigation-animation library. You can see that in addition to some parameters in the previous Navigation library, there are also several parameters used to animate. Let's take a look at them:

* * enterTransition:** defines the input conversion animation of the destination in this NavGraph

* * exitTransition:** defines the exit conversion animation for the destination in this NavGraph

* * popEnterTransition:** defines the pop-up input conversion animation of the destination in this NavGraph

* * popExitTransition:** defines the pop-up exit conversion animation for the destination in this NavGraph

Let's take a look at the specific use:

Composable (route = route, arguments = arguments, deepLinks = deepLinks, enterTransition = {expandVertically (animationSpec = tween)}, exitTransition = {shrinkOut (animationSpec = tween)}, popEnterTransition = {expandVertically (animationSpec = tween (300))}, popExitTransition = {shrinkOut (animationSpec = tween (300))}, content = content,) so far On the "Android Compose page switching animation how to achieve" the end of the study, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.