Call for mocks and use cases for screen level tran...

# compose

[Doris Liu]

Call for mocks and use cases for screen level transition. 🙂
As we are building low level animation support for transition from screen to screen, we would love to support the use cases that you wish to build.😄 If you could add to the thread your use cases (preferably in video format, but static mocks + descriptions would do), we'll surely take them into consideration. 🙇

[Colton Idle]

Our top use cases are fairly simple IMO. Slide up from bottom, and sliding in from the side (popular with master > detail flows). If that sort of support can come out of the box + the material motion system (I believe there was 4 core ones when the motion system came out).

If we got ^^^ then that covers 100% of the screen anims/transitions I've done in 6+ years of Android so far.

[allan.conda]

Oooh! Would love to share our use-cases:
1. Screen B slides in from left replacing A (within bottom navigation)
2. Screen B expands from FAB as full screen on top of bottom navigation bar
3. Screen A to Screen B declares own TopAppBar but crossfades content smoothly (for example when doing 1, Top bar doesn’t slide along with content; shared transitions?)
4. Screen B expands from a list item, sharing elements (such as thumbnail and title)
5. Simple crossfades when navigating between Bottom Tabs (as per material spec)

[Tolriq]

Fragment transition without fragments 🙂 Image + a few views from a screen to another screen like show list to seasons list to episode list to episode details.

[Olivier Patry]

I'd like the following capability:
1. Screen A to B using DirectionA -> DirectionB slide transition. Screen B back to A using opposite DirectionB -> DirectionA slide transition. This for Up, Bottom, Left, Right directions.
2. An individual transition for each screen when entering/leaving

[Doris Liu]

Re: @Colton Idle Thanks! 🙂 I'd love to get some clarification 🙏:
• When the new screen slides in from bottom/side, what animation do you expect to see for the old screen.
• By "4 core ones", do you mean shared X/Y/Z + fade through? (We'll have all these provided out of the box when the API is finalized. )

[Doris Liu]

Re @Tolriq:

Fragment transition without fragments 🙂 Image + a few views from a screen to another screen like show list to seasons list to episode list to episode details.

Thank you. If I understand you correctly, this is a shared element transition of image + a few views from/to list? 🙂

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

One thing I haven’t really seen a good way to do with classic Android views is to preserve view state in shared elements when transitioning (maybe there’s some trick I don’t know of?). Anyway, I’ve seen some apps both on Android (YouTube) on iOS (App Store) that do reveal-type transitions with shared elements that have complex state like videos or animations, and the state (playback) is preserved during the transition. It seems like it would be useful if the Compose APIs would make that sort of thing possible. I hacked together a little proof-of-concept of this a while back.

[Colton Idle]

@Doris Liu I think the old screen would just sit there although I do remember potentially implementing this with fragments and maybe the "old" screen shift very slightly down just to make the anim a little nicer. But it was clear that this thing was coming over top. And honestly, in a way we kind of have an easy way to do this now that we have bottom sheets and it typically has that behavior we want, but sometimes our design team wants us to have a screen slide in from the bottom without it being a bottom sheet. I think this is mostly to satisfy them with this animation that seems fairly typical on iOS.

Re: 4
It's these 4 that my design team got hooked onto:

https://www.youtube.com/watch?v=RzdWILMmAZs▾

"Our new system includes 4 transition patterns animating between components and full screen views. Container transform, shared axis, fade through and fade" at 1:08 in the video

[Chachako]

Even in the native, there is no very elegant way to implement the following animations, combine transitions and have some delay between them (may should support to detailed control of the properties of each animation group), If implemented in Android, this should require writing a lot of "Spaghetti code". Hope there is in Compose A good idea to solve it

Dribbble_1.mp4

[Chachako]

Maybe they are just a combination of shared elements and some fineness control 🙂

[Doris Liu]

Re @Zach Klippenstein (he/him) [MOD] Thanks for sharing! Indeed, it's very complex to have this sort of "live" shared element transition. I see two categories of solutions: 1) Use the same consumer of the animation states, and change everything around it to give the impression of transitioning to a different UI, like you did in the project linked above. 😄 2) A more general solution: seamlessly swap the consumers of the same animation states while keeping the states live. It requires those states to be hoisted and the consumers to be completely stateless. It demands a good architecture in the user code as well as good support in Compose. 🙂 We'll explore some patterns to make this sort of "live" shared element in the longer term.

[Doris Liu]

Re @Chachako Thanks for the inspiration. Some of these transitions seem sequential (i.e. one is waiting for another to finish before it starts), some of the animations seem like staggered (i.e. each animation has a little delay on top of the previous animation). It'd be useful for us to support sequential transition, within each transition there can be multiple properties animating. 🙂

[Albert Chang]

Not really a use case but one thing I'm concerned about is that the rendering of the new screen (with complicated layout) can block the main thread and cause a lot of frame drops at the start of the transition. AFAIK window animations are not run on the main thread so this problem doesn't exist when using activities. This problem does happen with fragments but at least we have postponeEnterTransition() and startPostponedEnterTransition(). I'd like to know if there's anything to be done to address this problem.

[Doris Liu]

Re @Albert Chang we'll keep you updated when we have a recommendation. Also cc @Ian Lake and @Jeremy Woods

[Ian Lake]

FWIW, window animations are also run on the main thread (that's why activities also have postpone APIs)

[Chachako]

@Doris Liu Sounds right, the approximate range should be correct, but I can’t explain them too well for the time being. In addition, there is a well-known transition library (Hero) in iOS, the use cases in the README should be used many times, and the library provides a good transition solution for this. But I think Compose should be able to use declarative to better accomplish this?

[Tlaster]

Would love to see not only the screen to screen transition but a general transition like Flutter's Hero or the UWP's Connected animation, these both works not only with the screen to screen but also the general view

[Ian Lake]

Compose is all about layering APIs - anything you can do at the screen by screen level will also be doable at the composable transition level 🙂

[Tolriq]

@Doris Liu

Thank you. If I understand you correctly,  this is a shared element transition of image + a few views from/to list? 🙂

Not always from a list but yes shared element transition. See https://yatse.tv/Files/transi1.mp4, https://yatse.tv/Files/transi2.mp4 , https://yatse.tv/Files/transi3.mp4

2 have also static elements in headers for nicer effects.
3 shows another user configurable starting view with more shared parts 2 images + 1 background that grow to target position.

I hope that I'll be able to polish more those with compose but this give the idea of the needs.

[Colton Idle]

Oh. I've got another one. Maybe out of scope here, but my design team always wants us to have this kind of hero image transition into the app bar. and since it's in the material docs they always want it, but I don't know if theres maybe a cookie cutter solution to it, or maybe it's easier to implement with compose already. But this is just about the last thing I can think of

photos video .mp4

[Tlaster]

@Colton Idle This can be done by compose already, you can checkout https://github.com/Tlaster/NestedScrollView as a reference

[Shakil Karim]

@Doris Liu I would love to see this type of animations which @Sam suggested a while back.
• custom zoom (which requires starting dimensions and shared objects)
• modal from bottom (pretty standard)
• slide-in-from-left for drilling into details screens (standard in iOS NavigationController)

screen-transition-examples.mov

[Vinay Gaba]

@Albert Chang do you know if the use case you brought up on this thread has a solution/recommendation for Compose yet?

[Albert Chang]

Not that I'm aware of.