} into content;
The classes presented create a scene that looks like the screenshot in Figure 3-1. There is a large
rectangle with rounded corners in the middle of the scene that contains a number of controls. When a
button on the left is pressed, the rectangle is replaced with a different but similar rectangle. Each button
will demonstrate one of the five example transitions presented in this chapter.
Figure 3-1. Transition demo
The following sections will cover the how each visual transition is implemented.
Example 1: Fade Replace
The fade replace is a simple transition where one node fades out to reveal a second. The general strategy
is to make the second node transparent and place it behind the first node, then create an animation that
simultaneously decreases the opacity of the first node while increasing the opacity of the second node.
When the animation is complete, the first node, now transparent, is removed from the scene.