JavaFX - Sequential Transition

You can apply one transition on a JavaFX node, or multiple transitions together. However, there are two different ways when you want to apply multiple transitions on a single node.

Sequential transition is applied on a JavaFX node when you want to apply multiple transitions on a JavaFX node one after the other. For instance, you can first increase or decrease the size of a shape using Scale Transition and then fade it out using Fade Transition. You can pause for while between these animations using Pause Transition (which we will learn about in further chapters.

Sequential Transition in JavaFX

SequentialTransition class is used to play multiple transitions on a JavaFX node in a sequential order. This class belongs to the javafx.animation package. All the transitions applied on the node are child transitions of this class that inherit its node property (only if their own node property is not specified).

Example

Following is the program which demonstrates Sequential Transition in JavaFX. Save this code in a file with the name SequentialTransitionExample.java.

import javafx.animation.PathTransition; 
import javafx.animation.ScaleTransition; 
import javafx.animation.SequentialTransition; 
import javafx.animation.TranslateTransition; 

import javafx.application.Application; 

import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.scene.shape.CubicCurveTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 

import javafx.stage.Stage;  
import javafx.util.Duration; 
        
public class SequentialTransitionExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the position of the circle 
      circle.setCenterX(150.0f); 
      circle.setCenterY(135.0f); 
      
      //Setting the radius of the circle 
      circle.setRadius(100.0f); 
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20); 
      
      //Instantiating the path class 
      Path path = new Path(); 
      
      //Creating the MoveTo path element 
      MoveTo moveTo = new MoveTo(100, 150); 
      
      //Creating the Cubic curve path element 
      CubicCurveTo cubicCurveTo = new CubicCurveTo(400, 40, 175, 250, 500, 150); 
      
      //Adding the path elements to Observable list of the Path class 
      path.getElements().add(moveTo); 
      path.getElements().add(cubicCurveTo);     
       
      //Creating path Transition 
      PathTransition pathTransition = new PathTransition(); 
      
      //Setting the duration for the transition 
      pathTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      pathTransition.setNode(circle); 
      
      //Setting the path for the transition  
      pathTransition.setPath(path); 
      
      //Setting the orientation of the path 
      pathTransition.setOrientation(
         PathTransition.OrientationType.ORTHOGONAL_TO_TAN GENT); 
      
      //Setting the cycle count for the transition 
      pathTransition.setCycleCount(5); 
      
      //Setting auto reverse value to false 
      pathTransition.setAutoReverse(false); 
      
      //Playing the animation 
      pathTransition.play();         
       
      //Creating Translate Transition 
      TranslateTransition translateTransition = new TranslateTransition(); 
      
      //Setting the duration for the transition 
      pathTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      pathTransition.setNode(circle); 
      
      //Setting the length of the transition along x axis 
      translateTransition.setByX(300); 
      
      //Setting the cycle count for the stroke 
      translateTransition.setCycleCount(5); 
      
      //Setting auto reverse value to false 
      translateTransition.setAutoReverse(false);  
       
      //Applying scale Transition to the circle 
      ScaleTransition scaleTransition = new ScaleTransition();       
      
      //Setting the duration for the transition 
      pathTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      pathTransition.setNode(circle); 
      
      //Setting the dimensions for scaling 
      scaleTransition.setByY(1.5); 
      scaleTransition.setByX(1.5);  
      
      //Setting the cycle count for the translation 
      scaleTransition.setCycleCount(5); 
      
      //Setting auto reverse value to false 
      scaleTransition.setAutoReverse(false);       
       
      //Applying Sequential Translation to the circle 
      SequentialTransition sequentialTransition = new SequentialTransition(circle, 
         pathTransition, translateTransition, scaleTransition ); 
      
      //Playing the animation 
      sequentialTransition.play(); 
         
      //Creating a Group object  
      Group root = new Group(circle); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
      
      //Setting title to the Stage 
      stage.setTitle("Seqiential transition example"); 
      
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls SequentialTransitionExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls SequentialTransitionExample

Output

On executing, the above program generates a JavaFX window as shown below.