Effect: Visual Transitions - JavaFX Special Effects - page 48

C H A P T E R 3
■ ■ ■
Effect: Visual Transitions
Visual transitions are animations that introduce a new visual component to the scene, usually by
replacing a component already in the scene. A good example of a visual transition is a fade-out on TV—it
is a visual effect that informs the viewer that something is ending and something new has started.
Application designers take advantage of visual transitions to inform the user that new content is on
the screen, perhaps because of a navigation choice made by the user. This chapter explores how visual
transitions are implemented in JavaFX by setting up a scene where the transitions can be viewed and the
details of each transition inspected.
While this topic uses the term “transition” to describe a change in an application, the JavaFX API
does have a class called javafx.animation.transition.Transition . This is not what we mean here by
transition, though the classes contained in the package javafx.animation.transition could certainly be
used when implementing a visual transition.
Getting Started
The visual transitions in the following sections all work on the same principle: They are functions that
take a node in the scene and replace it with another node. An animation is also involved to make the
replacement interesting to the user. It is important when implementing these functions that at the end
of the animation, the nodes are left in a predictable state. For example, if a node passed into the
transition function has its opacity set to .6 and the transition adjusts that value, at the end of the
transition, the opacity should be set back to .6. This will cut down on unwanted side-effects.
The code in Listing 3-1 implements a simple scene containing a node to be transitioned and a
number of buttons that trigger each transition type covered in this chapter.
Listing 3-1. Main.fx
package org.lj.jfxe.chapter3;
import javafx.stage.Stage;
import org.lj.jfxe.chapter3.example1.*;
import org.lj.jfxe.chapter3.example2.*;
import org.lj.jfxe.chapter3.example3.*;
import org.lj.jfxe.chapter3.example4.*;
import org.lj.jfxe.chapter3.example5.*;
import javafx.scene.Scene;