I am still trying to solve this problem in compose...

# compose

[David Breneisen]

I am still trying to solve this problem in compose, where I can animate multiple properties of a Composable, transitioning between, let’s say 3 states, unpressed, pressed, expanded.

One challenge is that I need to go from unpressed -> pressed, and let that transition finish before starting the transition from pressed -> expanded. Otherwise the animation won’t be smooth if the user finishes the click action before the press animation finishes. So I need an intermediary that catches the state change and holds it until the finished listener is invoked.

The tweening functions need to take into account both the starting state and end state in order to calculate their values, so I need some object to encapsulate that information with the tween value.

I’ve tried wrapping this up in a ButtonTransition composable and returning a ButtonState instance that wraps the state and tween values: ButtonState(val type: MutableStateType, val tween: StateFloat), and modifying the ButtonState.type based on the PressInteraction, but there’s a lot of issues with it.

From what I can tell, the recomposition from the animation is causing multiple instances of my ButtonTransition to be created, so the information is being lost upon recomposition (as well as other issues).

[David Breneisen]

Currently I’m trying to investigate if updateTransition can provide this functionality in some way.

[Stylianos Gakis]

If you use a lower level animation primitive, like an Animatable. And you put your actions inside a Channel(Unlimited), and then you have a LaunchedEffect which collects that channel and does Animatable.animateTo(newState) will this fulfill all of your requirements?
Then drive the animations on top of the value inside the animatable.
You get the queueing behavior from collecting the channel (important to use collect and not collectLatest).
And you are relying on the fact that your animation will be run in a coroutine and suspend before your next event is collected since animateTo is suspending https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/Animatable.kt;l=224?q=Animatable

[David Breneisen]

Interesting idea, I’ll try that out next. I’ve almost achieved it with the MutableTransitionState, but trying to queue the next transition state in a variable causes strange issues.

If I don’t queue it, it doesn’t respect the animation duration (see video).
https://github.com/davebren/code-reference/blob/main/compose-multiplatform/pressExpandBackAnimationScreen/PressExpandBackAnimationScreen.kt

Screen_recording_20240928_134217.webm

[David Breneisen]

It’s a nice effect and I’d like to base my entire app’s navigation on it so I’d really like to get it working in compose