https://kotlinlang.org logo
#compose
Title
# compose
l

Luke

02/21/2023, 5:21 PM
What is the recommended way to handle multiple animations with some running at the same time, and some running automatically when the first set of animations is finished? I have to animate an onboarding screen with two panels (A and B) with animationn roughly as follows: 1. Panel A slides from the left and panel B slides from the right 2. The content of panel B fades in (1 image and one text centered vertically) 3. The text of panel B fades out. The image goes to the top of the panel and stays visible 4. A new content fades in in B, with the same image at the same place at the top of the panel The only thing I can see for now is playing with delays in LauchedEffect and updating a target state for the animations but that doesn't seem clean
r

rook

02/21/2023, 5:39 PM
Using a
TargetBasedAnimation
, you can calculate whether the animation is over in a
LaunchedEffect
and then call-back to a completion lambda with something like this:
Copy code
val startTime = withFrameNanos { it }
do {
    val playTime = withFrameNanos { it } - startTime

    animatedValue.value = animation.getValueFromNanos(playTime)

    if (animation.isFinishedFromNanos(playTime)) {
        onCompleted(runningState)
        break
    }
} while (true)
d

Doris Liu

02/22/2023, 5:30 PM
Can these different steps be expressed as different
Transition
target states? If so, you could consider creating a
MutableTransitionState
and using it in updateTransition. This way you could update `MutableTransitionState`'s
targetState
whenever the transition finishes.
Copy code
val mutableTransitionState = remember { MutableTransitionState(initialState) }
    updateTransition(mutableTransitionState, label = "...")
    LaunchedEffect(mutableTransitionState) {
        snapshotFlow {
            mutableTransitionState.currentState == mutableTransitionState.targetState
        }.collect { finished ->
            if (finished) {
                // change target to the next transition state
                mutableTransitionState.targetState = nextState
            }
        }
    }
r

rook

02/22/2023, 6:43 PM
Yes, in a project I work on, we have a set of transitions that are triggered in order this way
l

Luke

02/22/2023, 7:43 PM
That's interesting. Thanks for both feedbacks
2 Views