Using animation to visualize state changes

State is app data that may change over time. In a Compose app, state (for example, a color) is represented through State or MutableState instances. State changes trigger recompositions. The following example shows a button and a box. Clicking the button toggles the color of the box between red and white by changing state:

@Composable
fun StateChangeDemo() {
  var toggled by remember {
    mutableStateOf(false)
  }
  val color = if (toggled)
    Color.White
  else
    Color.Red
  Column(
    modifier = Modifier
      .fillMaxSize()
      .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Button(onClick = {
      toggled = !toggled
  ...