CODEWITHSUNDEEP
androidkotlinandroid-animationandroid-jetpackandroid-jetpack-compose
Nicolas Mage
Nicolas Mage

Reputation: 431

Jetpack Compose Crossfade broken in Alpha

My crossfade animations are no longer working since the release of Compose Alpha and I would really appreciate some help getting them working again. I am fairly new to Android/Compose. I understand that Crossfade is looking for a state change in its targetState to trigger the crossfade animation, but I am confused how to incorporate this. I am trying to wrap certain composables in the Crossfade animation.

Here are the official docs and helpful playground example, but I still cannot get it to work since the release of Alpha https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#crossfade https://foso.github.io/Jetpack-Compose-Playground/animation/crossfade/

Here is my code, in this instance I was hoping to use the String current route itself as the targetState as a mutableStateOf object. I'm willing to use whatever will work though.

@Composable
fun ExampleComposable() {

val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute: String? = navBackStackEntry?.arguments?.getString(KEY_ROUTE)

val exampleRouteTargetState = remember { mutableStateOf(currentRoute)}

Scaffold(
    ...
    NavHost(navController, startDestination = "Courses") {
    composable("Route") {
        Crossfade(targetState = exampleRouteTargetState, animationSpec = tween(2000)) {
            ExampleComposable1()
        }
    }
    composable("Other Route")
        ExampleComposable2()
    }
)
...

}

Shouldn't navigation trigger a state change of the "exampleRouteTargetState" variable and then trigger crossfade? I could also wrap the composable elsewhere if you think wrapping it inside the NavHost may create an issue. Thanks so much for the help!!

Upvotes: 0

Views: 3136

Answers (3)

Alex Mamo
Alex Mamo

Reputation: 138834

The Accompanist library will be deprecated according to the docs, where it said that:

Now that AnimatedContent is stable, we were able to move the code from Accompanist Navigation Animation back into Navigation Compose itself.

This means all of the support for setting custom transitions that existed in AnimatedNavHost is directly supported in NavHost.

This means that you'll be able to achieve the same functionality using the regular NavHost which now has 4 new arguments, the enterTransition, exitTransition, popEnterTransition, and popExitTransition.

Upvotes: 0

abhi
abhi

Reputation: 1136

Lately Google Accompanist has added a library which provides Compose Animation support for Jetpack Navigation Compose.. Do check it out. 👍🏻

https://github.com/google/accompanist/tree/main/navigation-animation

Upvotes: 1

Nicolas Mage
Nicolas Mage

Reputation: 431

Still haven't gotten Crossfade working again, but I was able to implement some transitions inside NavHost. Hope this helps someone. Here are the docs if you want to fine tune these high level animations: https://developer.android.com/jetpack/compose/animation#animatedvisibility

@ExperimentalAnimationApi
@Composable
fun ExampleAnimation(content: @Composable () -> Unit) {
    AnimatedVisibility(
        visible = true,
        enter = fadeIn(initialAlpha = 0.3f),
        exit = fadeOut(),
        content = content,
        initiallyVisible = false
    )
}

And then simply wrap your NavHost composable declarations with your animation like so

NavHost(navController, startDestination = "A Route") {
composable(Screen.YourObject.Route) {
    ExampleAnimation {
        YourComposable()
    }
}

Upvotes: 0

Related Questions