**every time the user click the button i want to show different icon inside the box and the transition should start again from its initial state **

fun card(iconColor: Color){
    val animateShape = remember { Animatable(50f) }
    Card(
        modifier = Modifier
            .size(100.dp)
            .padding(5.dp)
            .border(width = Dp(animateShape.value), White, shape = CircleShape),
        shape = CircleShape,
        elevation = 5.dp,
        backgroundColor = BlueGrey,
    ) {
            Icon(
                imageVector = Icons.Default.DoneAll,
                contentDescription = null,
                tint = iconColor,
                modifier = Modifier
                    .padding(12.dp)

            )
        }
    LaunchedEffect(iconColor) {
        animateShape.animateTo(
            targetValue = 2f,
            animationSpec = repeatable(
                animation = tween(
                    durationMillis = 3000,
                    easing = LinearEasing,
                    delayMillis = 500
                ),
                iterations = 1
            )
        )
    }
}```

CodePudding user response：

I'm not quite sure, but are you looking for something like this?, every click it changes the Icon with scaleIn/scaleOut animation

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun SwitchIconOnClick() {

    var iconState by remember { mutableStateOf("State_1") }

    AnimatedContent(
        targetState = iconState,
        contentAlignment = Alignment.Center,
        transitionSpec  = {
            scaleIn(animationSpec = tween(durationMillis = 200)) with
                    scaleOut(animationSpec = tween(durationMillis = 200))
        }
    ) { state ->

        Box(
            modifier = Modifier
                .clip(CircleShape)
                .size(50.dp)
                .clickable {
                    when (state) {
                        "State_1" -> {
                            iconState = "State_2"
                        }
                        "State_2" -> {
                            iconState = "State_3"
                        }
                        "State_3" -> {
                            iconState = "State_1"
                        }
                    }
                },
            contentAlignment = Alignment.Center
        ) {
            Icon(imageVector =  when (state) {
                "State_1" -> {
                    Icons.Rounded.NotificationAdd
                }
                "State_2" -> {
                    Icons.Rounded.ClosedCaption
                }
                "State_3" -> {
                    Icons.Rounded.Delete
                }
                else -> {
                    Icons.Rounded.DataArray
                }
            },
            contentDescription = null
            )
        }
    }
}