How to Use Transition Classes in JavaFX

By Doug Lowe

JavaFX comes with eight predefined animation effects — dubbed transition classes — that you can use to easily create an animation on most any node in your scene graph. (Most of the transitions will work with any node, but some will work only on shapes.) The eight transition types are

  • FadeTransition: Varies the opacity value of any node. You can use this transition to fade an object in or out. Or, you can use it to make an object “wink” by quickly fading it out and then back in. You can also use it to create a flashing light that repeatedly fades in and then out.

  • FillTransition: Varies the color of a shape’s fill from a starting color to an ending color. For example, you can make a circle change from red to green.

  • PathTranslation: Causes a shape to move along a predefined path. You can use any shape for the path.

  • PauseTransition: This handy transition simply pauses for a moment; it’s often used between two transitions to cause a break in the action.

  • RotateTransition: Causes a node to rotate.

  • ScaleTransition: Causes an object to increase or decrease in size.

  • StrokeTransition: Varies the color used for a shape’s outline stroke.

  • TranslateTransition: Moves a node by translating it from one location to another.

These eight transition classes are all subclasses of the Transition class, which is in turn a subclass of the Animation class. The table lists the methods that are defined by the Transition and Animation classes, and are therefore available to all transition classes.

Methods of the Transition and Animation Classes
Method Explanation
void play() Plays the animation from its current position.
void playFromStart() Plays the animation from the start.
void pause() Temporarily suspends the animation. You can start it again by
calling play.
void stop() Stops the animation.
void setCycleCount(int value) Sets the number of times the animation should repeat. To repeat
the animation an indefinite number of times, specify
setAutoReverse(boolean value) If true, the animation reverses direction each time the cycle
is repeated.
Determines the method used to calculate the intermediate values
of the property controlled by the transition. The possible values
are Interpolator.DISCRETEInterpolator.LINEARInterpolator.EASE_INInterpolator.EASE_OUTInterpolator.EASE_BOTH. The default setting is EASE_BOTH.

Most of the methods in the table are straightforward, but the setInterpolator method merits a bit of explanation. The interpolator is the method used to calculate the intermediate values of the property being controlled by the transition.

For example, in a FadeTransition, the interpolator determines how the value of the node’s opacity is varied during the time that the animation is running; for a TranslateTransition, the interpolator determines how the x- and y-coordinates change during the animation.

The default interpolator setting is Interpolator.EASE_BOTH, which means that the change begins slowly, then speeds up though the middle of the animation, then slows down again just before the animation ends. For a TranslateTransition, this causes the movement of the node to start slowly, speed up, and then slow down toward the end.

The EASE_IN interpolator speeds up at the beginning but ends abruptly, while the EASE_OUT interpolator starts abruptly but slows down at the end. The LINEAR interpolator varies the property controlled by the transition at a constant rate throughout the animation. And the DISCRETE interpolator doesn’t change the property value at all until the end of the animation has been reached; then, it immediately changes to the ending value.