AnotherTest.kt

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.*
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

enum class ColorBox { Red, Green, Blue }


@OptIn(ExperimentalTransitionApi::class)
@Preview
@Composable
fun BoxTest() {
    var boxState by remember { mutableStateOf(ColorBox.Red) }
    val transition = updateTransition(boxState, label = "My Animation")
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {


        val redBoxTransition = transition.createChildTransition {
            it == ColorBox.Red
        }
        val greenBoxTransition = transition.createChildTransition {
            it == ColorBox.Green
        }
        val blueBoxTransition = transition.createChildTransition {
            it == ColorBox.Blue
        }

        RedBox(redBoxTransition)
        GreenBox(greenBoxTransition)
        BlueBox(blueBoxTransition)

        Column(
            modifier = Modifier.align(Alignment.BottomCenter)
        ) {

            Text(text = "boxState: $boxState")
            Text(text = "redBoxTransition: ${redBoxTransition.isRunning}")
            Text(text = "greenBoxTransition: ${greenBoxTransition.isRunning}")
            Text(text = "blueBoxTransition: ${blueBoxTransition.isRunning}")

            Button(
                onClick = {
                    boxState = when (boxState) {
                        ColorBox.Red -> ColorBox.Green
                        ColorBox.Green -> ColorBox.Blue
                        ColorBox.Blue -> ColorBox.Red
                    }
                },
                modifier = Modifier.padding(10.dp)
            ) {
                Text(text = "TOGGLE")
            }
        }
    }
}

@Composable
fun RedBox(transition: Transition<Boolean>) {
    transition.AnimatedVisibility(
        visible = { it },
        enter = fadeIn(animationSpec = tween(3000)),
        exit = fadeOut(animationSpec = tween(3000))
    ) {
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
        ) {}
    }
}

@Composable
fun GreenBox(
    transition: Transition<Boolean>
) {
    transition.AnimatedVisibility(
        visible = { it },
        enter = fadeIn(animationSpec = tween(3000)),
        exit = fadeOut(animationSpec = tween(3000))
    ) {
        Box(
            modifier = Modifier
                .size(200.dp)
                .background(Color.Green)
        ) {}
    }
}

@Composable
fun BlueBox(transition: Transition<Boolean>) {
    transition.AnimatedVisibility(
        visible = { it },
        enter = fadeIn(animationSpec = tween(3000)),
        exit = fadeOut(animationSpec = tween(3000))
    ) {
        Box(
            modifier = Modifier
                .size(250.dp)
                .background(Color.Blue)
        ) {}
    }
}