I'm new to Jetpack Compose and this is the first animation I'm trying to produce. I'm trying to make an animation that enlarges the size of my icon and then returns it to its original size. I would like the entire animation to last for 350 milliseconds.
Here is my code so far:
@Composable
fun NavIcon(icon: ImageVector, size: Dp) {
var isZoomed by remember { mutableStateOf(false) }
// Animation values
val scale by animateFloatAsState(
targetValue = if (isZoomed) 1.2f else 1f,
animationSpec = tween(durationMillis = 350),
label = ""
)
val onClickAnimation = {
isZoomed = !isZoomed
}
Icon(
imageVector = icon,
contentDescription = null,
modifier = Modifier
.size(size)
.clickable(onClick = onClickAnimation)
.size(size * scale)
)
}
I want to create a customized navigation bar with icons that zoom when clicked.
Thank you if you have any ideas/solutions !