Just implemented a basic transition navigation "fr...

# compose

[Timo Drick]

Just implemented a basic transition navigation "framework" in about 200 lines of code. It supports enter/exit transitions defined by a Modifier. So it is easy to define simple transitions. (Already defined are: fadein, fadeout, crossfade, slidein, slideout, roll right/left)
For me again this shows that compose is amazing. But get the transition system working in an efficient way was very hard. I used the code from the Crossfade composable as base. And it works now fine but for me little bit of magic. Because i needed to make sure that during the transition animation the content composable is not recomposed.
Implementation is here: https://gitlab.com/timod/compose-playground/-/blob/master/app/src/main/java/de/appsonair/compose/Navigation.kt
https://gitlab.com/timod/compose-playground/-/blob/master/app/src/main/java/de/appsonair/compose/Transition.kt
And a demo how to use is in the MainActivit.kt file.

device-2020-07-15-132622.webm

[Zach Klippenstein (he/him) [MOD]]

Nice! If you want another challenge, try integrating with UiSavedStateRegistry

[Timo Drick]

So you want that the navigation history is stored persitently?
I think it should be easy to integrate. But for my use case currently not really necessary. (Ok i thought a little bit about this. And it is not so easy. Because every screens states have to be stored.)

[Timo Drick]

But the transition effects are very limited for now. So it is not possible to implement transitions were one image of a list become the new view. Maybe when i integrate the new approach from Chris Banes https://gist.github.com/chrisbanes/c4d199a34366a4e13594f5f98d6e8620 it gets possible. But the Compose devs also working on a solution.

[Zach Klippenstein (he/him) [MOD]]

If you do end up needing to do that, i have a similar library that has this feature that you could maybe use as a starting point – and you’re right, it is not trivial to do correctly 😅
https://github.com/zach-klippenstein/compose-backstack

[Timo Drick]

Cool. I know that there are also many other solutions out. Just tried to do it on my own and exactly the way it fits my needs.
And for me it is amazing that this is possible with compose.
I mean in the legacy View system this would be much more code.

[Zach Klippenstein (he/him) [MOD]]

Yea this is a pattern that is obviously gonna be super useful. I think the more implementations the better, it will be cool to see what APIs and features are more popular/useful.

[Timo Drick]

Your solution looks very similar to mine (In feature point of view). But is implemented a complete different way :-)

[Zach Klippenstein (he/him) [MOD]]

Interestingly, we both started from Crossfade 😂

[Timo Drick]

To be honest i started with an custom approach. But it did recompose of the content composables on every frame. And also some times detached the old screen to just reattach it one frame later. I was not able to solve this problems. Tried many thinks. And at the end i had to stay very close to the Crossfade implementation (I still do not really understand what are the rules when recompose happens. Maybe just because Compose itself is not able to optimize some compositions). And now it do not call onDispose until the animation is finished and also it do not recompose the content during the animation.