JavaFX Sequential Transition

In the JavaFX application, in order to generate the sequential transition, we have to apply sequential transition on any particular shape. It has the ability to execute multiple transactions sequentially one after the another after a specific pause. All methods needed for this purpose are present in the javafx.animation.SequentialTransition class.

JavaFX Animation - Sequential Transition as a combination of Scale and Fade transition

Example:

import javafx.animation.FadeTransition;
import javafx.animation.PauseTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.SequentialTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;


public class AnimationUI extends Application {  


    @Override  
    public void start(Stage stage) throws Exception 
    { 
    
    Rectangle newcir = new Rectangle(140,140,100,100);     
    newcir.setStroke(Color.BLUE);  
    newcir.setFill(Color.RED);  
    newcir.setStrokeWidth(20);  
          
           Duration dur1 = Duration.millis(1000);  
           Duration dur2 = Duration.millis(5000);  
         
             
           PauseTransition pause = new PauseTransition(Duration.millis(5000));  
           
    FadeTransition fade = new FadeTransition(dur2);  
         fade.setFromValue(1.0f);  
         fade.setToValue(0.3f);  
         fade.setCycleCount(2);  
         fade.setAutoReverse(true);  
         
         ScaleTransition scale = new ScaleTransition(dur1);  
         scale.setByX(1.5f);
         scale.setByY(1.5f);
         scale.setAutoReverse(true);




           
         SequentialTransition seqT = new SequentialTransition (newcir,scale, pause, fade);  
           
         seqT.play();  
       
        Group root = new Group();  
        root.getChildren().addAll(newcir);  
         Scene scene = new Scene(root,500,450);  
         stage.setScene(scene);  
        stage.setTitle("JavaFx Sequential Transition example");  
         stage.show();  
     }
      
    public static void main(String[] args) {  
        launch(args);  
    }  
}

Output:

In order to create the sequential Transition in JavaFX, we have to import all the required libraries such as javafx.animation.ScaleTransition, javafx.animation.SequentialTransition, javafx.animation.FadeTransition, javafx.animation.PauseTransition, javafx.application.Application, javafx.scene.Group, javafx.scene.Scene, javafx.scene.paint.Color, javafx.scene.shape.Rectangle, javafx.stage.Stage, javafx.util.Duration.

Then we have created one class named AnimationUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold a sequential transition on the given rectangle , a Group object is created which is then passed to the Scene class object.

The Rectangle is created with the help of the constructor and the size parameter and red color to be filled are passed in it. A Sequential Transition object is created and using setters various properties are set. Then it will show sequential transitions on the rectangle.

The stage is prepared, the title is set and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed with the title, " JavaFX Animation - Sequential Transition Example”. Also, it displays a rectangle filled with red color and blue stroke increasing shape and then after pause rectangle gets faded.

JavaFX Animation - Sequential Transition as a combination of Scale and Translate transition

Example:

import javafx.animation.PauseTransition;
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.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;


public class AnimationUI extends Application {  


    @Override  
    public void start(Stage stage) throws Exception 
    { 
   
    
    Rectangle newcir = new Rectangle(140,140,100,100);     
    newcir.setStroke(Color.BLUE);  
    newcir.setFill(Color.RED);  
    newcir.setStrokeWidth(20);  
          
       Duration dur1 = Duration.millis(1000);  
         
             
           PauseTransition pause = new PauseTransition(Duration.millis(5000));  
           
           TranslateTransition translate = new TranslateTransition(dur1);  
           translate.setByX(500);  
           
           translate.setDuration(Duration.millis(7000));  
             
           translate.setCycleCount(500);  
             
           translate.setAutoReverse(true);  
             


         
         ScaleTransition scale = new ScaleTransition(dur1);  
         scale.setByX(1.5f);
         scale.setByY(1.5f);
         scale.setAutoReverse(true);




           
         SequentialTransition seqT = new SequentialTransition (newcir,scale, pause, translate);  
           
         seqT.play();  
       
        Group root = new Group();  
        root.getChildren().addAll(newcir);  
         Scene scene = new Scene(root,500,450);  
         stage.setScene(scene);  
        stage.setTitle("JavaFx Sequential Transition example");  
         stage.show();  
     }
      
    public static void main(String[] args) {  
        launch(args);  
    }  
}

Output:

In order to create the sequential Transition in JavaFX, we have to import all the required libraries such as javafx.animation.ScaleTransition, javafx.animation.SequentialTransition, javafx.animation.TranslateTransition, javafx.animation.PauseTransition, javafx.application.Application, javafx.scene.Group, javafx.scene.Scene, javafx.scene.paint.Color, javafx.scene.shape.Rectangle, javafx.stage.Stage, javafx.util.Duration.

Then we have created one class named AnimationUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold a sequential transition on the given rectangle , a Group object is created which is then passed to the Scene class object.

The Rectangle is created with the help of the constructor and the size parameter and red color to be filled in it with blue stroke. A Sequential Transition object is created and using setters various properties are set. Then it will show sequential transitions on the rectangle which is a combination of scale and translate transition.

The stage is prepared, the title is set and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed with the title, " JavaFx Sequential Transition example”. Also, it displays a rectangle filled with red color and blue stroke increasing shape and then after pause rectangle translates from one place to another.