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 :)