Basic Animation: Creating a shape animation in JavaFX

Last update on December 21 2024 09:39:46 (UTC/GMT +8 hours)

Write a JavaFX application that animates a shape (e.g., a circle) to move across the window in response to a button click.

Sample Solution:

JavaFx Code:

Main.java

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
import javafx.animation.TranslateTransition;

public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Shape Animation");

        Pane root = new Pane();

        // Create a circle to animate.
        Circle circle = new Circle(50, Color.RED);
        circle.setCenterX(50);
        circle.setCenterY(100);

        // Create a button to start the animation.
        Button startButton = new Button("Start Animation");
        startButton.setLayoutX(150);
        startButton.setLayoutY(250);

        // Create a TranslateTransition for the circle.
        TranslateTransition translateTransition = new TranslateTransition(Duration.seconds(2), circle);

        // Set the target location for the animation.
        translateTransition.setToX(250);
        translateTransition.setAutoReverse(true);
        translateTransition.setCycleCount(TranslateTransition.INDEFINITE);

        // Handle the button click to start the animation.
        startButton.setOnAction(event -> {
            if (!translateTransition.getStatus().equals(TranslateTransition.Status.RUNNING)) {
                translateTransition.play();
            }
        });

        root.getChildren().addAll(circle, startButton);

        Scene scene = new Scene(root, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

Explanation:

In the exercise above -

Import the necessary JavaFX libraries.
Create a class "Main" that extends "Application" and overrides the "start()" method.
Inside the "start()" method:

Set the title of the application window to "Shape Animation."

Create a 'Pane' named 'root' to serve as the root container for the application's UI elements.
Create a blue circle with a radius of 50, and set its initial position.
Create a button labeled "Start Animation" and position it.
Create a TranslateTransition named translateTransition to control the animation of the circle. The animation will move the circle from its initial position to the target position (toX).
Handle the button click to start the animation. The animation is played only if it's not already running.
Add the circle and the button to the root container.
Create a JavaFX Scene named 'scene' with the 'root' layout, setting its dimensions to 300x300 pixels.
Set the created scene in the primary stage (primaryStage) and show the window.

Sample Output:

Flowchart:

Java Code Editor:

Previous:Event Handling: Creating a Clickable Circle in JavaFX.

Weekly Trends and Language Statistics
Weekly Trends and Language Statistics