”;
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.
”;