- JavaFX Tutorial
- JavaFX - Home
- JavaFX - Overview
- JavaFX Installation and Architecture
- JavaFX - Installation Using Netbeans
- JavaFX - Installation Using Eclipse
- JavaFX - Installation using Visual Studio Code
- JavaFX - Architecture
- JavaFX - Application
- JavaFX 2D Shapes
- JavaFX - 2D Shapes
- JavaFX - Drawing a Line
- JavaFX - Drawing a Rectangle
- JavaFX - Drawing a Rounded Rectangle
- JavaFX - Drawing a Circle
- JavaFX - Drawing an Ellipse
- JavaFX - Drawing a Polygon
- JavaFX - Drawing a Polyline
- JavaFX - Drawing a Cubic Curve
- JavaFX - Drawing a Quad Curve
- JavaFX - Drawing an Arc
- JavaFX - Drawing an SVGPath
- JavaFX Properties of 2D Objects
- JavaFX - Stroke Type Property
- JavaFX - Stroke Width Property
- JavaFX - Stroke Fill Property
- JavaFX - Stroke Property
- JavaFX - Stroke Line Join Property
- JavaFX - Stroke Miter Limit Property
- JavaFX - Stroke Line Cap Property
- JavaFX - Smooth Property
- Operations on 2D Objects
- JavaFX - 2D Shapes Operations
- JavaFX - Union Operation
- JavaFX - Intersection Operation
- JavaFX - Subtraction Operation
- JavaFX Color and Texture
- JavaFX - Colors
- JavaFX Text
- JavaFX - Text
- JavaFX Effects
- JavaFX - Effects
- JavaFX Transformations
- JavaFX - Transformations
- JavaFX Animations
- JavaFX - Animations
- JavaFX Images
- JavaFX - Images
- JavaFX 3D Shapes
- JavaFX - 3D Shapes
- JavaFX - Creating a Box
- JavaFX - Creating a Cylinder
- JavaFX - Creating a Sphere
- Properties of 3D Objects
- JavaFX - Cull Face Property
- JavaFX - Drawing Modes Property
- JavaFX - Material Property
- JavaFX Event Handling
- JavaFX - Event Handling
- JavaFX - Using Convenience Methods
- JavaFX - Event Filters
- JavaFX - Event Handlers
- JavaFX UI Controls
- JavaFX - UI Controls
- JavaFX - ListView
- JavaFX - Accordion
- JavaFX - ButtonBar
- JavaFX - ChoiceBox
- JavaFX - HTMLEditor
- JavaFX - MenuBar
- JavaFX - Pagination
- JavaFX - ProgressIndicator
- JavaFX - ScrollPane
- JavaFX - Separator
- JavaFX - Slider
- JavaFX - Spinner
- JavaFX - SplitPane
- JavaFX - TableView
- JavaFX - TabPane
- JavaFX - ToolBar
- JavaFX - TreeView
- JavaFX - Label
- JavaFX - CheckBox
- JavaFX - RadioButton
- JavaFX - TextField
- JavaFX - PasswordField
- JavaFX - FileChooser
- JavaFX - Hyperlink
- JavaFX - Tooltip
- JavaFX - Alert
- JavaFX - DatePicker
- JavaFX - TextArea
- JavaFX Charts
- JavaFX - Charts
- JavaFX - Creating Pie Chart
- JavaFX - Creating Line Chart
- JavaFX - Creating Area Chart
- JavaFX - Creating Bar Chart
- JavaFX - Creating Bubble Chart
- JavaFX - Creating Scatter Chart
- JavaFX - Creating Stacked Area Chart
- JavaFX - Creating Stacked Bar Chart
- JavaFX Layout Panes
- JavaFX - Layout Panes
- JavaFX - HBox Layout
- JavaFX - VBox Layout
- JavaFX - BorderPane Layout
- JavaFX - StackPane Layout
- JavaFX - TextFlow Layout
- JavaFX - AnchorPane Layout
- JavaFX - TilePane Layout
- JavaFX - GridPane Layout
- JavaFX - FlowPane Layout
- JavaFX CSS
- JavaFX - CSS
- Media with JavaFX
- JavaFX - Playing Video
- JavaFX Useful Resources
- JavaFX - Quick Guide
- JavaFX - Useful Resources
- JavaFX - Discussion
Sequential Parallel Transitions
Sequential Transition
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 SequentialTransitionExample.java java SequentialTransitionExample
On executing, the above program generates a JavaFX window as shown below.
Parallel Transition
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 parallelTransitionExample.java java parallelTransitionExample
On executing, the above program generates a JavaFX window as shown below.
Pause Transition
Following is the program which demonstrates Pause Transition in JavaFX. Save this code in a file with the name PauseTransitionExample.java.
import javafx.animation.PauseTransition; import javafx.animation.ScaleTransition; import javafx.animation.SequentialTransition; import javafx.animation.TranslateTransition; import javafx.application.Application; import static javafx.application.Application.launch; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.stage.Stage; import javafx.util.Duration; public class PauseTransitionExample 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(50.0f); //Setting the color of the circle circle.setFill(Color.BROWN); //Setting the stroke width of the circle circle.setStrokeWidth(20); //Creating a Pause Transition PauseTransition pauseTransition = new PauseTransition(); //Setting the duration for the transition pauseTransition.setDuration(Duration.millis(1000)); //Creating Translate Transition TranslateTransition translateTransition = new TranslateTransition(); //Setting the duration for the transition translateTransition.setDuration(Duration.millis(1000)); //Setting the node of the transition translateTransition.setNode(circle); //Setting the value of the transition along the x axis translateTransition.setByX(300); //Setting the cycle count for the stroke translateTransition.setCycleCount(5); //Setting auto reverse value to true translateTransition.setAutoReverse(false); //Creating scale Transition ScaleTransition scaleTransition = new ScaleTransition(); //Setting the duration for the transition scaleTransition.setDuration(Duration.millis(1000)); //Setting the node for the transition scaleTransition.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 true scaleTransition.setAutoReverse(false); //Applying Sequential transition to the circle SequentialTransition sequentialTransition = new SequentialTransition( circle, translateTransition, pauseTransition, 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("Pause 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 PauseTransitionExample.java java PauseTransitionExample
On executing, the above program generates a JavaFX window as shown below.