Nat Strangerweather

    Nat Strangerweather

    1 year ago
    ```
    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

    Doris Liu

    1 year ago
    The problem here is
    isSelected
    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) }
    As for bouncing out of the box, you could accomplish that with a bouncy spring:
    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

    Nat Strangerweather

    1 year ago
    wonderful, may thanks for this! 🙂
    @Doris Liu The bouncing animation is perfect! Cheers!