Nat Strangerweather
12/10/2020, 6:20 PM```
I don't understand why the animation works when I select the button but not when I deselect it. Any ideas? Here is my code. Also, are there any animation effects, like bouncing etc out of the box, or do they have to be implemented from scratch?
```var isSelected = selectedIndex.value == index
val scale = animate(if (isSelected) 1f else 0f)
if (color != null) {
Column(
Modifier.fillMaxWidth(), horizontalAlignment = CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Box(Modifier.fillMaxWidth(), Center) {
Card(
backgroundColor = color,
modifier = Modifier.size(100.dp)
.padding(10.dp)
.clip(CircleShape)
.clickable(
indication = null,
onClick = {
selectedIndex.value = index
isSelected = !isSelected
}
)
) {
Box(Modifier.fillMaxSize(), Center) {
when (index) {
0 -> Icon(alarm)
1 -> Icon(mediaSounds)
2 -> Icon(touchSounds)
3 -> Icon(Icons.Rounded.Notifications)
4 -> Icon(events)
5 -> Icon(Icons.Rounded.Email)
}
}
}
Box(Modifier.fillMaxSize(), Center) {
OptionsPopUp(scale = scale, color = color)
}
}
Text(text = string, style = typography.subtitle2)
}
}
}
}
}
Doris Liu
12/10/2020, 7:48 PMisSelected
is not remembered, so when in the next composition, it initialized again. That's why isSelected = !isSelected
doesn't work as you anticipated. You could do something like var isSelected by remember { mutableStateOf(selectedIndex.value == index) }
val scale = animate(if (isSelected) 1f else 0f, spring(dampingRatio = Spring.DampingRatioHighBouncy)
If it's too bouncy, you could play with the damping ratio/stiffness to find a bounciness to your liking. 🙂Nat Strangerweather
12/10/2020, 7:54 PM