JavaData & JavaDoing Animation in JavaFX

Doing Animation in JavaFX

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Animation is computer generated illusory effect implied by the visual change of an object by displaying slightly changed images in quick succession. We achieve this in JavaFX by changing the property of a node over time. If this change of property determines a change in the location coordinate of the object in the screen, we get an illusion of motion. However, all animation does not imply motion; for example, if we change the fill property of an object over time, we get an animation of a different sort than motion.

Overview of Java Animation

Animation involves a few key concepts such as timeline, key frames, key values, and interpolation. Timeline represents the time duration of an animation progression; key frame denotes the state of the animated object at a specific instant of time on the timeline. Every key frame has an associated key value that is modified by the interpolator. The interpolator is responsible for generating intermediate frames.

Ani1
Figure 1: The animation timeline

For example, a vehicle moving left to right horizontally along its x-axis for 20 seconds; the time duration is maintained by the horizontal line called the timeline. The vehicle at the 0th second or at key value tx=0 represents the first key frame. Similarly, at the 5th second or at key value tx=200 represents the second key frame, and so on. The key value associated with the keyframe here represents the change of position or translation value along the x-axis. The intermediate frames between two consecutive keyframes are generated by the interpolator to produce finer motion; otherwise, the animation would look jerky. JavaFX, by default, uses the linear interpolation technique where the key value property of the animated object changes in proportion to the change in the time on the timeline; in other words, at (t+5)% time, the value of the property will be (x+5)% between the initial and final target values.

API Architecture

JavaFX has a dedicated class, called Animation, representing animation. This abstract class provides common properties and methods used by classes that intend to implement animation. Some of the core animation classes and their hierarchy are as follows.

Ani2
Figure 2: The Animation class

There are two types of animation supported by JavaFX, such as:

  • Timeline animation: In timeline animation, we create the effect by adding key frames to a timeline. The intermediate frames are generated by JavaFX with the help of an interpolator. Though Timeline animation requires more effort on the part of a programmer, it gives more control to manipulate animation effect as well. Along the progression of time on a timeline, we can update property values of an animated objects such as changing size, color location, and so on. The start and end snapshots denoted by the keyframes and the generated intermediate frames between consecutive frames by the interpolator facilitates stopping, pausing, resuming, reversal, or repeat effect of the animation upon request. This type of animation is best suited for animating rather complex graphical scenes that require more control over the changes from one frame to the next.
  • Transition: Transition animation is best suited for a planned animation in the sense that it incorporates animation in an internal timeline. There are several concrete transition classes with which we can compose multiple animations that can be executed in parallel or sequentially. For example, the RotateTransition class implements a rotating effect by changing the degree of rotation of a node over time. This is a comparatively simplified technique and easier to use than timeline animation.

An Example

Following is self-explanatory example of how we can use transition functions to animate rotating circles around an elliptical orbit. It is a rudimentary simulation of the planetary system with no astrophysical rules applied. However, this may give an idea on how to simulate the solar system; the project is quite interesting. 🙂

package application;

import java.util.Random;
import javafx.animation.PathTransition.OrientationType;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Circle;
import javafx.scene.shape.ClosePath;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.transform.Transform;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {

   private static final int MAX_NODES=30;
   private Random random =
      new Random(System.currentTimeMillis());

   private Path createOrbitalPath(double centerX,
         double centerY,double radiusX, double radiusY,
         double rotate) {
      ArcTo arcTo = new ArcTo();
      arcTo.setX(centerX - radiusX + 1);
      arcTo.setY(centerY - radiusY);
      arcTo.setSweepFlag(false);
      arcTo.setLargeArcFlag(true);
      arcTo.setRadiusX(radiusX);
      arcTo.setRadiusY(radiusY);
      arcTo.setXAxisRotation(rotate);
      Path path = new Path();
      path.getElements()
         .add(new MoveTo(centerX - radiusX, centerY -
         radiusY));
      path.getElements().add(arcTo);
      path.getElements().add(new ClosePath());
      path.setVisible(false);
      return path;
   }

   private PathTransition createPathTransition(double second,
         Path path, Node node) {
      PathTransition t = new PathTransition();
      t.setDuration(Duration.seconds(second));
      t.setPath(path);
      t.setNode(node);
      t.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
      t.setCycleCount(Timeline.INDEFINITE);
      t.setAutoReverse(false);
      return t;
   }

   private Node createEllipticShape(double radius) {
      Circle circle = new Circle(radius);
      circle.setFill(Color.rgb(random.nextInt(255),
         random.nextInt(255), random.nextInt(255),.55));
      return circle;
   }

   private void createStage(Stage stage){
      Group root = new Group();
      stage.setResizable(true);
      Scene scene=new Scene(root, 640, 480);
      scene.setFill(Color.BLACK);
      stage.setScene(scene);
      root.getTransforms().add(
         Transform.translate(scene.getWidth()/2,
         scene.getHeight()/2));
      int side=scene.getWidth()<scene.getHeight()?
         (int)scene.getWidth():(int)scene.getHeight();

      for(int i=0;i<MAX_NODES;i++){
         Node n=createEllipticShape(random.nextInt(20));
         root.getChildren().add(n);
         int unit=random.nextInt(side);
         Path p=createOrbitalPath(unit, 0, unit-100,
            unit-100, 0);
         root.getChildren().add(p);
         createPathTransition(random.nextInt(10), p,
            n).play();
      }

   }

   @Override
   public void start(Stage primaryStage) {

      createStage(primaryStage);
      primaryStage.show();
   }

   public static void main(String[] args) {
      Application.launch(args);
   }
}

Conclusion

The main idea of animation in JavaFX is the change of property of a node over a period of time. If this change determines the location of the node, the resulting animation is that of motion. If we change the fill property of a shape over time, the illusion of animation changes its perspective. So, the animation does not always mean some form of motion. It can be change of color, alpha value, and so forth. The best part is that JavaFX provides the APIs; it is up to the creative expression of a programmer to realize the illusion in the screen.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories