Archie
09/17/2020, 4:35 PMCrossfade(key) {
when (it) {
is CaseA -> ComposableA()
is CaseB -> ComposableB()
....
}
}
Is just "similar" (effect wise not implmentation wise) as using AnimatedVisibilty
such as this:
AnimatedVisibility(
visible = key == CaseA,
exit = ...,
enter = ...,
content = content
) {
ComposableA()
}
AnimatedVisibility(
visible = key == CaseB,
exit = ...,
enter = ...,
content = content
) {
ComposableB()
}
Crossfade
was more optimize as in its implementation code, the composable who doesn't hold the current key gets removed...
state.items.clear()
keys.mapTo(state.items) { key ->
CrossfadeAnimationItem(key) { children ->
val opacity = animatedOpacity(
animation = animation,
visible = key == current,
onAnimationFinish = {
if (key == state.current) {
// leave only the current in the list
state.items.removeAll { it.key != state.current } // THIS RIGHT HERE!
state.invalidate()
}
}
)
Stack(Modifier.drawOpacity(opacity.value)) {
children()
}
}
}
AnimatedVisibility
I found this:
// If the exit animation has finished, skip the child composable altogether
if (transitionState == AnimStates.Gone) {
return
}
AnimatedVisibility
and Crossfade
doesn't keep any composable that aren't needed (doesn't match the key).
If I am correct about this, then AnimatedVisibility
would be better for more custom enter and exit animation, where Crossfade
would only act as a convenience method to use for simple fadeIn fadeOut animation.
Did I understand it correctly?Zach Klippenstein (he/him) [MOD]
09/17/2020, 5:28 PMCrossfade
allowing custom animations, although at that point it's not a cross fade anymore, but that's just naming. Probably there are different use cases for each where either one would be more readable/show clear intent than the other.Timo Drick
09/17/2020, 9:02 PMDoris Liu
09/17/2020, 11:14 PMAnimatedVisibilty
s, you'll need to be explicit about their z-order if you need the Crossfade
behavior. This behavior is more obvious when there's overlap between fade in and fade out. 🙂 Aside from that, both of them skip the child composables that have finished exiting/fadd-out.Archie
09/18/2020, 4:15 AMAnimatedVisibility
so that the composable with the visible key would always be on top?Doris Liu
09/18/2020, 4:56 AMAnimatedVisibility
to change the z-index to non-0 (or the largest among siblings) when visible. That'll put it on top. For example:
AnimatedVisibility(visible = enabled.value,
modifier = Modifier.zIndex(if (enabled.value) 10.0f else 0f)) {...}
Archie
11/04/2020, 6:43 AMval navController = rememberNavController()
Scaffold(
topBar = {
val currentBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = currentBackStackEntry?.arguments?.get(KEY_ROUTE)
AnimatedVisibility(
visible = currentRoute == ScreenC.route,
exit = slideOutVertically(
targetOffsetY = { -it },
),
enter = slideInVertically(
initialOffsetY = { -it },
),
) {
TopAppBar(title = { Text("Sample App") },)
}
AnimatedVisibility(
visible = currentRoute == ScreenB.route,
exit = slideOutVertically(
targetOffsetY = { -it },
),
enter = slideInVertically(
initialOffsetY = { -it },
),
) {
TopAppBar(
modifier = Modifier.height(200.dp),
title = { Text("Sample App") },
)
}
},
) {
val modifier = Modifier.padding(it)
NavHost(
navController = navController,
startDestination = ScreenA.route,
) {
composable(ScreenA.route) {
MyScreen(modifier, "A", "", "to B") {
navController.navigate(ScreenB.route)
}
}
composable(ScreenB.route) {
MyScreen(modifier, "B", "", "to C") {
navController.navigate(ScreenC.route)
}
}
composable(ScreenC.route) {
MyScreen(modifier, "C", "","to A") {
navController.navigate(ScreenA.route)
}
}
}
}
}
But the Scaffold's content doesn't Animate with the AppBar Swapping and instead just jump to the end position. I was wondering if this was intended? If it is, is there any advice you could give to make the animation smoother?Doris Liu
11/04/2020, 7:17 PMArchie
11/05/2020, 3:55 AMDoris Liu
12/11/2020, 6:00 PMTransition
during the screen change. But we haven't made plans to support that in navigation transition yet. Do you have a specific mock that you are trying to emulate?Archie
12/12/2020, 6:11 AM