Home > database >  jetpack compose Lottie addAnimataionListener
jetpack compose Lottie addAnimataionListener

Time:03-22

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?

CodePudding user response:

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
    }
}
  • Related