JavaFX - Parallel Transition

As we learned previously, JavaFX allows you to apply multiple transitions on a node. This can be done by applying one transition at a time (called sequential transitions) or applying multiple transitions at a time (called parallel transitions).

Parallel transitions, like its name suggests, applies more than one transition on a single object at one parallelly. For instance, the JavaFX node on which these transitions are applied, can grow in size while moving from one place to another. This can be achieved by applying Scale and Translate transitions together.

Let us learn more about parallel transitions elaborately in this chapter.

Parallel Transition

ParallelTransition class is used to play multiple transitions parallelly on a JavaFX node. 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; if their node property is not specified.

Example

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

import javafx.animation.ParallelTransition; 
import javafx.animation.PathTransition; 
import javafx.animation.ScaleTransition; 
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.CubicCurveTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
import javafx.scene.shape.Rectangle; 

import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class parallelTransitionExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //Drawing a Rectangle 
      Rectangle rectangle = new Rectangle(); 
      
      //Setting the position of the rectangle 
      rectangle.setX(75.0f); 
      rectangle.setY(75.0f); 
      
      //Setting the width of the rectangle 
      rectangle.setWidth(100.0f); 
      
      //Setting the height of the rectangle 
      rectangle.setHeight(100.0f);      
      
      //setting the color of the rectangle 
      rectangle.setFill(Color.BLUEVIOLET); 
      
      //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 of the transition 
      pathTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      pathTransition.setNode(rectangle); 
      
      //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 
      translateTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      translateTransition.setNode(rectangle); 
      
      //Setting the axis and length of the transition 
      translateTransition.setByX(300); 
      
      //Setting the cycle count of the transition 
      translateTransition.setCycleCount(5); 
      
      //Setting auto reverse value to false 
      translateTransition.setAutoReverse(false);  
       
      //Creating scale Transition 
      ScaleTransition scaleTransition = new ScaleTransition(); 
      
      //Setting the duration for the transition  
      translateTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      translateTransition.setNode(rectangle); 
      
      //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 true 
      scaleTransition.setAutoReverse(false);       
       
      //Applying parallel Translation to the circle 
      ParallelTransition parallelTransition = new ParallelTransition(
         rectangle, pathTransition, translateTransition, scaleTransition ); 
      
      //Playing the animation 
      parallelTransition.play(); 
         
      //Creating a Group object  
      Group root = new Group(rectangle); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
      
      //Setting title to the Stage 
      stage.setTitle("Parallel 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 parallelTransitionExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls parallelTransitionExample 

Output

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