Hey, how can I get notified of animation start/end...

# compose

[Alex]

Hey, how can I get notified of animation start/end inside of an AnimatedVisibility?
Code in 🧵

[Alex]

Right now I have:

@Composable
public inline fun Transition<EnterExitState>.ListenerEffect(
    noinline transitionSpec: @Composable Transition.Segment<EnterExitState>.() -> FiniteAnimationSpec<Int> = {
        spring(visibilityThreshold = 1)
    },
    label: String = "ListenerEffect",
    onEnterStart: () -> Unit = {},
    onEnterEnd: () -> Unit = {},
    onExitStart: () -> Unit = {},
    onExitEnd: () -> Unit = {},
) {
    val animationProgress by animateValue(Int.VectorConverter, transitionSpec, label) { enterExitState ->
        when (enterExitState) {
            EnterExitState.PreEnter -> 200
            EnterExitState.Visible -> 100
            EnterExitState.PostExit -> 0
        }
    }
    when (animationProgress) {
        200 -> onEnterStart()
        100 -> when (currentState) {
            EnterExitState.PreEnter -> when (targetState) {
                EnterExitState.Visible -> onEnterEnd()
                else -> Unit // ignore
            }
            EnterExitState.Visible -> when (targetState) {
                EnterExitState.PostExit -> onExitStart()
                else -> Unit // ignore
            }
            else -> Unit // ignore
        }
        0 -> onExitEnd()
    }
}

[Alex]

Which feels way too akward to be used in production

[Alex]

Jetpack Compose itself offers this helpful TODO qq

[Doris Liu]

Are you using AnimatedVisibility as an extension function on a Transition? If not, you could use the AnimatedVisibility overload that takes a MutableTransitionState, and observe the state change in a snapshotFlow

[Doris Liu]

Something like this:

val visibleState = remember { MutableTransitionState(false)}
            visibleState.targetState = ..
            LaunchedEffect(Unit) {
                snapshotFlow { Pair(visibleState.currentState, visibleState.targetState) }.collect {
                    if (it.first == it.second) {
                        if (visibleState.currentState) {
                            // enter finished
                        } else {
                            // exit finished
                        }
                    } else {
                        if (visibleState.targetState) {
                            // enter started
                        } else {
                            // exit started
                        }
                    }
                }
            }
            AnimatedVisibility(visibleState = visibleState) {
                ...
            }

[Alex]

I’m using the extension and unfortunately cannot change that part as it is inside of a library. I’ll check if I can adapt your code for my purposes though, somehow.

[Doris Liu]

The code could be easily adapted to observe Transition.current/targetState instead.