JavaFX Path Transition

In the JavaFX application, in order to generate the path transition, we have to apply path transition on any particular shape. It has the ability to traverse the given shape along the path. The path transition required the user to specify the path for the transition. This is done using the class Path in the javafx.scene.shape package. We have to specify the x and y coordinates for the given node at the regular intervals to create the transition. All methods needed for this purpose are present in the javafx.animation.PathTransition class.

Constructor to create Path Transition:

1. public PathTransition():

This Path constructor is used to create path transition and properties can be set using setters.

2. public PathTransition( Duration time, shape path ):

This Path constructor is used to create path transition with specified duration and shape and properties can be set using setters.

3. public PathTransition(Duration duration, Shape path, Node node):

This Path constructor is used to create path transition with specified duration and shape with node specified and properties can be set using setters.

Properties and corresponding methods to create Translate Transition:

1. duration

This property is of double type. It is used to represent the duration of the transition and the setDuration() method is used to set it.

2. node

This property is of the object type. It is used to represent the shape on which the animation is to be carried out and setNode() method is used to set it.

3. orientation

This property is of the object type. It is used to represent the orientation for the given node to specify the animation along the path and the setOrientation() method is used to set it.

4. path

This property is of the object type. It is used to show the path for the animation of the shape. The setPath() method is used to set it.

JavaFX Animation - Path Transition

Example:

import javafx.animation.PathTransition;
import javafx.animation.PathTransition.OrientationType;
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 AnimationUI extends Application {  


    @Override  
    public void start(Stage stage) throws Exception 
    { 
    
    Rectangle newrect = new Rectangle(120,120,100,100);     
    newrect.setStroke(Color.BLUE);  
    newrect.setFill(Color.RED);  
    newrect.setStrokeWidth(20);  
          
    Path newpath = new Path();  
    newpath.getElements().add (new MoveTo (120f, 20f));  
    newpath.getElements().add (new CubicCurveTo (200f, 200f, 450f, 320f, 560f, 40f));  
          
        PathTransition pathTransition = new PathTransition();  
         
        pathTransition.setDuration(Duration.millis(1000));  
          
        pathTransition.setNode(newrect);  
          
        pathTransition.setPath(newpath);  
          
        pathTransition.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);  
          
        pathTransition.setCycleCount(10);  
          
        pathTransition.setAutoReverse(true);  
      
        pathTransition.play();  
          
     
        Group root = new Group();  
        root.getChildren().addAll(newrect);  
         Scene scene = new Scene(root,700,450);  
         stage.setScene(scene);  
        stage.setTitle("JavaFx Path Transition example");  
         stage.show();  
     }
      
    public static void main(String[] args) {  
        launch(args);  
    }  
}

Output:

In order to create the Translate Transition in JavaFX, we have to import all the required libraries such as javafx.animation.PathTransition, javafx.animation.PathTransition.OrientationType, javafx.application.Application, javafx.scene.Group, javafx.scene.Scene, javafx.scene.paint.Color, import javafx.scene.shape.CubicCurveTo, javafx.scene.shape.MoveTo, javafx.scene.shape.Path, 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 rectangle moving along the path, 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 size parameters. Then the object of PathTransition is created and setters are used to set properties. Then it displays a rectangle that moves along the cubic curve path.

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 Path Transition example”. Also, it displays a rectangle field with red color moving along the cubic curve path.