Spicing up transitions through visual effects

So far, I have shown you animations that modify certain aspects of a UI element, like its color, size, or visibility. But sometimes you may want to exchange parts of your UI. Then, Crossfade() comes in handy. It allows you to switch between two composable functions with a crossfade animation. Let's look at my CrossfadeAnimationDemo() sample (Figure 8.2), part of the AnimationDemo project, to see how this works:

Figure 8.2 – The AnimationDemo sample showing CrossfadeAnimationDemo()

A switch toggles between two screens. As we are focusing on animation, I kept the Screen()composable very simple, just a box with customizable background color, and a big text centered inside. You can find its source code in AnimationDemoActivity.kt.

Crossfading composable functions

Like most examples in this chapter, CrossfadeAnimationDemo() uses a Column() as the root element. The column contains a switch, and the screen...