ToGabor.kt

import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun Demo() {

    Column {
        var state by remember { mutableStateOf(false) }
        val transition = updateTransition(targetState = state, label = "My Animation")

        val animatedWidth1 by transition.animateDp(
            transitionSpec = { tween(durationMillis = 3000) }, label = "Anim 1"
        ) { isAnimate ->
            if (isAnimate) {
                200.dp
            } else {
                100.dp
            }
        }

        val animatedWidth2 by transition.animateDp(
            transitionSpec = { tween(durationMillis = 6000) }, label = "Anim 2"
        ) { isAnimate ->
            if (isAnimate) {
                300.dp
            } else {
                100.dp
            }
        }

        // Box 1
        Box(
            modifier = Modifier
                .width(animatedWidth1)
                .height(30.dp)
                .background(Color.Red)
        ) {}

        Box(
            modifier = Modifier
                .width(animatedWidth2)
                .height(30.dp)
                .background(Color.Green)
        ) {}

        Text(text = "isRunning: ${transition.isRunning}")

        Button(onClick = { state = !state }) {
            Text(text = "TOGGLE")
        }
    }
}