What Is JavaFX Animation?

By Doug Lowe

You can take your JavaFX applications further by incorporating simple animation effects. The effects generally make your applications come alive by enabling objects on the screen to move.

You can go a long way toward improving the look and feel of your JavaFX applications by applying special effects, incorporating property bindings to make your controls more responsive, and using sound and media to provide audio and visual interest.

Please don’t get your hopes set on winning an Oscar for Best Animation next year. No one will be fooled into thinking that you collaborated with Pixar on your application. Still, you can add some interesting whiz-bang to your applications using these techniques.

The basic idea of JavaFX animations is to manipulate the value of one or more node properties at regular intervals. For example, suppose you have a circle that represents a ball and you want to move it from the left side of the screen to the right. Assuming the width of the screen is 600 pixels, you’d animate the circle by varying its posX property from 0 to 600.

Two factors will affect how fast the ball moves across the screen: the amount of time that elapses between each change to the posX property, and the increment you add to the posX property at each time interval.

For example, if you add 3 to the posX property at each time interval, it will take 200 intervals to get to 600 (3 x 200 = 600). If the intervals occur every 10 milliseconds (100 times per second), it will take 2,000 milliseconds — 2 full seconds — for the ball to traverse the screen from left to right.

Without JavaFX animations, you could implement the moving ball by using the Java Timer object to move the ball at regular intervals. The Timer class can be difficult to set up and use correctly. The JavaFX animation classes make animating your nodes a much simpler proposition.

JavaFX provides two basic ways to create animations — the hard way and the easy way:

  • The hard way requires that you set up timer events manually, and then write event listeners that are called when the timer events occur. In the event listeners, you manipulate the properties of the nodes you want to animate.

    For example, to move a ball across the screen, you’d set up a timer interval that ticks every 10 milliseconds. At each tick, you’d increase the x position of the ball by 3. You’d then set the timer to run a total of 200 times to move the ball.

    Setting up this animation requires that you use two classes: Timeline and KeyFrame, and that you write an ActionEvent listener to move the ball.

  • The easy way takes advantage of shortcut classes provided by JavaFX to easily implement common types of animations.

    For example, you can use the TranslateTransition class to easily move a circle from one side of the screen to the other over a specified period of time. You just set up a TranslateTransition specifying that you want to vary the ball’s x position from 0 to 600 over the course of 2 seconds. The TranslateTransition class will take care of the details.