Using animation to visualize state changes

An app’s state is app data that may change over time. In a Compose app, state (for example, a color) is represented by State or MutableState instances. State changes trigger recompositions. The composable StateChangeDemo() 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
      .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Button(onClick = {
      toggled = !toggled
    }) {
  ...