jetpack compose Lottie addAnimataionListener

Question

I want to use Lottie in Jetpack Compose. here is my code

val logoAnimationComposition by rememberLottieComposition(
    spec = LottieCompositionSpec.RawRes(
        resId = R.raw.twitter_logo_motion
    )
)
val logoAnimationProgress by animateLottieCompositionAsState(
    composition = logoAnimationComposition,
    isPlaying = true
)
LottieAnimation(
    modifier = Modifier.size(
        size = logoSize
    ),
    composition = logoAnimationComposition,
    progress = logoAnimationProgress
)

I need to know when this animation ends.

i can handle it with the duration of animation that I already know from our ui designer but it's not a good way.

and the documentation didn't say any thing about it.

what can I do?

Bifoliolate

Answer 1

As of December 11, 2023 the isAtEnd property didn't work for me, I had to check the progress float value, when it reaches 1.0, means it finished:

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(animationRes))

val progress by animateLottieCompositionAsState(composition)

LottieAnimation(
    composition = composition,
    contentScale = contentScale,
    progress = { progress },
    modifier = modifier
)

if (progress == 1f) { // animation ended
    LaunchedEffect(Unit) { onAnimationFinished() }
}

Willywillynilly

Answer 2

In Compose we don't use listeners, instead we have to read the state and react to its changes.

You need to remove delegation from animateLottieCompositionAsState, then you have access to much more information, for example you can check isAtEnd.

Using simple if you can display an other view or made some job using side effects:

val logoAnimationState = animateLottieCompositionAsState(
    composition = logoAnimationComposition,
    isPlaying = true
)
LottieAnimation(
    modifier = Modifier.size(
        size = logoSize
    ),
    composition = logoAnimationComposition,
    progress = logoAnimationState.progress
)
if (logoAnimationState.isAtEnd) {
    LaunchedEffect(Unit) {
        // to your job
    }
}

Watterson

isAtEnd didn't work for me. So I used progress >= 1.0F instead. – Braunite