JavaFX Animation Tutorial with Examples

Translate transition allows to create movement animation from one point to another within a duration. Using TranslateTransition#setByX / TranslateTransition#setByY, you can set how much it should move in x and y axis respectively. It also possible to set precise destination by using TranslateTransition#setToX / TranslateTransition#setToY.

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Animation extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Button btn = new Button("ClickMe");
        Group group = new Group(btn);
        Scene scene = new Scene(group, 600, 600);

        //Duration = 2.5 seconds
        Duration duration = Duration.millis(2500);
        //Create new translate transition
        TranslateTransition transition = new TranslateTransition(duration, btn);
        //Move in X axis by +200
        transition.setByX(200);
        //Move in Y axis by +100
        transition.setByY(100);
        //Go back to previous position after 2.5 seconds
        transition.setAutoReverse(true);
        //Repeat animation twice
        transition.setCycleCount(2);
        transition.play();

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

Scale transition is another JavaFX animation which can be used out of the box that allows to animate the scale / zoom of the given object. The object can be enlarged or minimized using this animation.

import javafx.animation.ScaleTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Animation extends Application {

  @Override
  public void start(Stage primaryStage) throws Exception {
    Button btn = new Button("Genuine Coder");
    Group group = new Group(btn);
    Scene scene = new Scene(group, 600, 600);

    //Duration = 2.5 seconds
    Duration duration = Duration.millis(2500);
    //Create new scale transition
    ScaleTransition scaleTransition = new ScaleTransition(duration, btn);
    //Set how much X should enlarge
    scaleTransition.setByX(1.5);
    //Set how much Y should
    scaleTransition.setByY(1.5);
    scaleTransition.play();

    primaryStage.setScene(scene);
    primaryStage.show();
  }

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

Rotate transition provides animation for rotating an object. We can provide upto what angle the node should rotate by toAngle. Using byAngle we can specify how much it should rotate from current angle of rotation.

import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Animation extends Application {

  @Override
  public void start(Stage primaryStage) {
    Button btn = new Button("Genuine Coder");
    Group group = new Group(btn);
    Scene scene = new Scene(group, 600, 600);

    //Duration = 2.5 seconds
    Duration duration = Duration.millis(2500);
    //Create new rotate transition
    RotateTransition rotateTransition = new RotateTransition(duration, btn);
    //Rotate by 200 degree
    rotateTransition.setByAngle(200);
    rotateTransition.play();

    primaryStage.setScene(scene);
    primaryStage.show();
  }

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

Fade transition creates a fade in / fade out effect by controlling opacity of the object. We can make fade in transition or fade out transition in JavaFX by setting the to and from value.

//Fade in transition
FadeTransition fadeInTransition = new FadeTransition(Duration.millis(1500), btn);
fadeInTransition.setFromValue(0.0);
fadeInTransition.setToValue(1.0);

//Fade out transition
FadeTransition fadeOutTransition = new FadeTransition(Duration.millis(1500), btn);
fadeOutTransition.setFromValue(1.0);
fadeOutTransition.setToValue(0.0);

Path transition provides option to move object through a specified path. The path can be anything from simple straight line to complex quadratic curves. Following code rotates button through a circular path locate at (200,200) with radius 50

import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Animation extends Application {

  @Override
  public void start(Stage primaryStage) {
    Button btn = new Button("Genuine Coder");
    Group group = new Group(btn);
    Scene scene = new Scene(group, 600, 600);

    //Create new path transition
    PathTransition pathTransition = new PathTransition();
    pathTransition.setDuration(Duration.millis(2500));
    //Set node to be animated
    pathTransition.setNode(btn);
    //Rotate button through a circular path locate at (200,200) with radius 50
    pathTransition.setPath(new Circle(200, 200, 50));

    pathTransition.play();

    primaryStage.setScene(scene);
    primaryStage.show();
  }

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

Sequential transition allows to combine two or more transition we have discussed so far. After the completion of one transition, the next will be started. The following code will apply rotate transition and scale transition sequentially.

//Create rotate transition
RotateTransition rotateTransition = new RotateTransition(Duration.seconds(1));
rotateTransition.setByAngle(180f);
//Create scale transition
ScaleTransition scaleTransition = new ScaleTransition(Duration.seconds(1));
scaleTransition.setByX(1.5f);

//First do rotateTransition, then do scaleTransition
SequentialTransition sequentialTransition = new SequentialTransition(rotateTransition, scaleTransition);
sequentialTransition.play();

Parallel transition is very much similar to sequential transition. Except, it works on parallel. All the animations applied will be played in parallel. We can specify two or more transition to execute in parallel.

//Create rotate transition
RotateTransition rotateTransition = new RotateTransition(Duration.seconds(1));
rotateTransition.setByAngle(180f);
//Create scale transition
ScaleTransition scaleTransition = new ScaleTransition(Duration.seconds(1));
scaleTransition.setByX(1.5f);

//Play both rotateTransition as well as scaleTransition in prallel
ParallelTransition sequentialTransition = new ParallelTransition(rotateTransition, scaleTransition);
sequentialTransition.play();

KeyFrame animation is one of the most key features of JavaFX Animation. The API javafx.animation.KeyFrame can be used to animate any JavaFX property. For example, let’s say you want to animate width of your application window. You can use widthProperty with KeyFrame to animate the width of your application window.

Watch video on using KeyFrame animation to create slide-in effect in JavaFX.

The following example loads a scene with slide in effect using JavaFX KeyFrame API

Parent root = getNextSceneRoot();
parentContainer.getChildren().add(root);

//Create a timeline instance
Timeline timeline = new Timeline();
//Create a keyValue. We need to slide in -- We gradually decrement Y value to Zero
KeyValue kv = new KeyValue(root.translateYProperty(), 0, Interpolator.EASE_IN);
//Create keyframe of 1s with keyvalue kv
KeyFrame kf = new KeyFrame(Duration.seconds(1), kv);
//Add frame to timeline
timeline.getKeyFrames().add(kf);

//Start animation
timeline.play();

In this chapter we familiarized with JavaFX animation API. JavaFX provides a good set of predefined animation set and a powerful KeyFrame animation API.

You Might also be interested in:-

• JavaFX 3D Tutorial: https://genuinecoder.com/javafx-3d-tutorial-introduction/
• JavaFX Scene Builder Tutorial: https://genuinecoder.com/javafx-scene-builder-tutorial-for-beginners/
• JavaFX Observables: https://genuinecoder.com/javafx-observables-and-bindings/