Spicing up transitions through visual effects

So far, I have shown you animations that modify certain aspects of a UI element, such as its color, size, or visibility. However, sometimes you may want to exchange parts of your user interface. This is where Crossfade() comes in handy. It allows you to switch between two composable functions with a crossfade animation. Let’s look at the CrossfadeAnimationDemo() composable in Figure 8.2 to see how this works:

Figure 8.2 – CrossfadeAnimationDemo() in Android Studio split view

A switch toggles between two screens. As we are focusing on animation, I kept the Screen() composable very simple. Here’s how it is implemented:

@Composable
fun Screen(
  text: String,
  backgroundColor: Color = Color.White
) {
  Box(
    modifier = Modifier
      .fillMaxSize()
      .background(color =...