JavaFXアニメーションボールの例

投稿日: 2019-11-05 2019-11-05
タグ: ball, geometry, javafx, timeline

バウンスボールは、JavaFxのアニメーションの「ハローワールド」です。この基本的な段階からでもJavaFxの潜在能力を記述し、理解しやすく、明らかにするのは簡単です。

私たちは、次に続くバウンスボールの基礎を設定する移動ボールを作成することから始めます。

1.移動するボールの例

基本的な設定とは別に、このコードには重要な行が1つしかありません。
Timeline`を作る行。この「タイムライン」には2つの重要な特性があります。 `KeyFrame`と
KeyValue`を返します。私たちが「タイムライン」と言うのは、簡単な英語で「ボールをどこから移動して、3秒後にペインの最後まで」ということです。それから、私たちはまたそれを二度と声をかけて願います！

MovingBall.java

package com.techfou.javafx.animatedball;

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class MovingBall extends Application{

    @Override
    public void start(Stage stage) {
        Pane canvas = new Pane();
        Scene scene = new Scene(canvas, 300, 300);
        Circle ball = new Circle(10, Color.RED);
        ball.relocate(0, 10);

        canvas.getChildren().add(ball);

        stage.setTitle("Moving Ball");
        stage.setScene(scene);
        stage.show();

        Bounds bounds = canvas.getBoundsInLocal();
        Timeline timeline = new Timeline(new KeyFrame(Duration.seconds(3),
                new KeyValue(ball.layoutXProperty(), bounds.getMaxX()-ball.getRadius())));
        timeline.setCycleCount(2);
        timeline.play();
    }

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

出力:

javafx-animated-ball-example-1

2.跳ねるボール

コードをすばやく見ると、前のコードとの類似点に気付くことができます。私たちのセットアップは
Timeline`に
EventHandler`があることを除けばほぼ同じです。ハンドルメソッド内のコードは、ボールが
Pane`の境界にない限り、
dx`と `dy`でボールを移動します。他の言葉では、ボールは逆の動きをする）。

BouncingBall.java

package com.techfou.javafx.animatedball;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class BouncingBall extends Application{

    @Override
    public void start(Stage stage) {

        Pane canvas = new Pane();
        Scene scene = new Scene(canvas, 300, 300, Color.ALICEBLUE);
        Circle ball = new Circle(10, Color.CADETBLUE);
        ball.relocate(5, 5);

        canvas.getChildren().add(ball);

        stage.setTitle("Animated Ball");
        stage.setScene(scene);
        stage.show();

        Timeline timeline = new Timeline(new KeyFrame(Duration.millis(20),
                new EventHandler<ActionEvent>() {

            double dx = 7;//Step on x or velocity
            double dy = 3;//Step on y

            @Override
            public void handle(ActionEvent t) {
               //move the ball
                ball.setLayoutX(ball.getLayoutX() + dx);
                ball.setLayoutY(ball.getLayoutY() + dy);

                Bounds bounds = canvas.getBoundsInLocal();

               //If the ball reaches the left or right border make the step negative
                if(ball.getLayoutX() <= (bounds.getMinX() + ball.getRadius()) ||
                        ball.getLayoutX() >= (bounds.getMaxX() - ball.getRadius()) ){

                    dx = -dx;

                }

               //If the ball reaches the bottom or top border make the step negative
                if((ball.getLayoutY() >= (bounds.getMaxY() - ball.getRadius())) ||
                        (ball.getLayoutY() <= (bounds.getMinY() + ball.getRadius()))){

                    dy = -dy;

                }
            }
        }));
        timeline.setCycleCount(Timeline.INDEFINITE);
        timeline.play();
    }

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

出力:

javafx-animated-ball-example-2

あなたの最初の試合

バウンスボールの例を試しながら、私はすべて透明にして、クリックでアプリケーションを閉じる `MouseEvent`を追加すればどうなると思いましたか？まあ…どういうわけか…私は跳ね上がるボールを私の机の上にキャッチしようとした！それで、私はJavaFxで初めてのゲームを作ったのです！楽しい！

MyFirstGame.java

package com.mkyong.javafx.animatedball;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.util.Duration;

public class MyFirstGame extends Application{

    @Override
    public void start(Stage stage) {

        Pane canvas = new Pane();
        Scene scene = new Scene(canvas, 300, 300, Color.TRANSPARENT);
        Circle ball = new Circle(10, Color.DARKSLATEBLUE);
        ball.relocate(5, 5);

        canvas.getChildren().add(ball);

        stage.initStyle(StageStyle.TRANSPARENT);
        scene.addEventFilter(MouseEvent.MOUSE__PRESSED, new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent mouseEvent) {
                Platform.exit();
                System.exit(0);
            }
        });
        stage.setTitle("Animated Ball");
        stage.setScene(scene);
        stage.show();

        Timeline timeline = new Timeline(new KeyFrame(Duration.millis(20), new EventHandler<ActionEvent>() {
            double dx = 7;//Step on x or velocity
            double dy = 3;//Step on y

            @Override
            public void handle(ActionEvent t) {
               //move the ball
                ball.setLayoutX(ball.getLayoutX() + dx);
                ball.setLayoutY(ball.getLayoutY() + dy);

                Bounds bounds = canvas.getBoundsInLocal();

               //If the ball reaches the left or right border make the step negative
                if(ball.getLayoutX() <= (bounds.getMinX() + ball.getRadius()) ||
                        ball.getLayoutX() >= (bounds.getMaxX() - ball.getRadius()) ){

                    dx = -dx;

                }

               //If the ball reaches the bottom or top border make the step negative
                if((ball.getLayoutY() >= (bounds.getMaxY() - ball.getRadius())) ||
                        (ball.getLayoutY() <= (bounds.getMinY() + ball.getRadius()))){

                    dy = -dy;

                }

            }
        }));
        timeline.setCycleCount(Timeline.INDEFINITE);
        timeline.play();
    }

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

出力:

javafx-animated-ball-example-3]

参考文献

https://www.manning.com/books/java-8-in-action

[Java 8 in Action –

Raoul-Gabriel Urma、Mario Fusco、Alan Mycroft]。

http://docs.oracle.com/javafx/2/animations/basics.htm

[Animation Basics

リンク://タグ/ボール/[ボール]リンク://タグ/ジオメトリ/[ジオメトリ]

javafx

timeline

getdocs

13036