Update Lottie animations with Jetpack Compose leads to glitch

Viewed 19

I'm trying to handle with Lottie Compose using LottieAnimation(). Here is my issue :

I have a BottomNavigation composable with a BottomNavigationItem composable. Inside this, I would like to have :

  • A Lottie "open animation" when selected an item
  • A Lottie "close animation" for the previous item when clicking on a new item.

For that, I did this :

BottomNavigationItem(
    selected = selectedIndex == index,
    icon = {
            Column(
                modifier = Modifier
                    .fillMaxHeight()
                    .padding(top = LVAppDesignKitTheme.dimens.dimens14),
                    horizontalAlignment = Alignment.CenterHorizontally,
             ) {
                   ....

                   Box() {
                       if (selectedIndex == index) {
                           NavBarAnimation(
                               animation = navigationItem.openAnimation
                           )
                       }

                       if (previousSelectedIndex == index) {
                           NavBarAnimation(
                               animation = navigationItem.closeAnimation
                           )
                       }
                   }
               }
           },
   onClick = {
       if (selectedIndex != index) { // Prevent to click on an already set item.
           previousSelectedIndex = selectedIndex
           selectedIndex = index                   
       }
   },
   interactionSource = interactionSource
 )
@Composable
fun NavBarAnimation(
    modifier: Modifier = Modifier,
    animation: Int,
    animationSpeed: Float = 1f,
    animationScale: Float = 1f
) {
    val composition = rememberLottieComposition(
        LottieCompositionSpec.RawRes(animation)
    )

    val progress = animateLottieCompositionAsState(
        composition = composition.value,
        speed = animationSpeed
    )

    LottieAnimation(
        modifier = modifier
            .fillMaxSize()
            .scale(animationScale),
        composition = composition.value,
        progress = { progress.value }
    )
}

However, doing that, I have some glitch during the recomposition. I think it's the frame between the update of animation (ie between the open and close animations). Am I doing something wrong or is there a way to smoothly make the transition ?

Thank you very much for your answers :)

0 Answers
Related