Javafx-animations

提供:Dev Guides
移動先:案内検索

JavaFX-アニメーション

一般に、オブジェクトをアニメートするということは、高速表示によってオブジェクトの動きを錯覚させることを意味します。 JavaFXでは、時間とともにプロパティを変更することでノードをアニメーション化できます。 JavaFXは、 javafx.animation という名前のパッケージを提供します。 このパッケージには、ノードのアニメーション化に使用されるクラスが含まれています。 アニメーションは、これらすべてのクラスの基本クラスです。

JavaFXを使用すると、フェード遷移フィル遷移回転遷移スケール遷移ストローク遷移変換遷移パス遷移シーケンシャル遷移などのアニメーション(遷移)を適用できます。 *、*一時停止遷移、*並列遷移*など

これらすべての遷移は、パッケージ javafx.animation の個々のクラスによって表されます。

特定のアニメーションをノードに適用するには、以下に示す手順に従う必要があります-

  • それぞれのクラスを使用して必要なノードを作成します。
  • 適用されるそれぞれの遷移(アニメーション)クラスをインスタンス化します
  • 遷移のプロパティを設定し、
  • 最後に、 Animation クラスの* play()*メソッドを使用してトランジションを再生します。

この章では、基本的な遷移(回転、スケーリング、翻訳)の例を説明します。

トランジションを回転

以下は、JavaFXのRotate Transitionを示すプログラムです。 このコードを RotateTransitionExample.java という名前のファイルに保存します。

import javafx.animation.RotateTransition;
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.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;

public class RotateTransitionExample extends Application {
   @Override
   public void start(Stage stage) {
     //Creating a hexagon
      Polygon hexagon = new Polygon();

     //Adding coordinates to the hexagon
      hexagon.getPoints().addAll(new Double[]{
         200.0, 50.0,
         400.0, 50.0,
         450.0, 150.0,
         400.0, 250.0,
         200.0, 250.0,
         150.0, 150.0,
      });
     //Setting the fill color for the hexagon
      hexagon.setFill(Color.BLUE);

     //Creating a rotate transition
      RotateTransition rotateTransition = new RotateTransition();

     //Setting the duration for the transition
      rotateTransition.setDuration(Duration.millis(1000));

     //Setting the node for the transition
      rotateTransition.setNode(hexagon);

     //Setting the angle of the rotation
      rotateTransition.setByAngle(360);

     //Setting the cycle count for the transition
      rotateTransition.setCycleCount(50);

     //Setting auto reverse value to false
      rotateTransition.setAutoReverse(false);

     //Playing the animation
      rotateTransition.play();

     //Creating a Group object
      Group root = new Group(hexagon);

     //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

     //Setting title to the Stage
      stage.setTitle("Rotate 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);
   }
}

次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。

javac RotateTransitionExample.java
java RotateTransitionExample

実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。

トランジションの回転

スケール遷移

以下は、JavaFXのスケール遷移を示すプログラムです。 このコードを ScaleTransitionExample.java という名前のファイルに保存します。

import javafx.animation.ScaleTransition;
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 ScaleTransitionExample extends Application {
   @Override
   public void start(Stage stage) {
     //Drawing a Circle
      Circle circle = new Circle();

     //Setting the position of the circle
      circle.setCenterX(300.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 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(50);

     //Setting auto reverse value to true
      scaleTransition.setAutoReverse(false);

     //Playing the animation
      scaleTransition.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("Scale 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);
   }
}

次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。

javac ScaleTransitionExample.java
java ScaleTransitionExample

実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。

スケール遷移

トランジションを翻訳

以下は、JavaFXのTranslate Transitionを示すプログラムです。 このコードを TranslateTransitionExample.java という名前のファイルに保存します。

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.stage.Stage;
import javafx.util.Duration;

public class TranslateTransitionExample 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);

     //Creating Translate Transition
      TranslateTransition translateTransition = new TranslateTransition();

     //Setting the duration of the transition
      translateTransition.setDuration(Duration.millis(1000));

     //Setting the node for the transition
      translateTransition.setNode(circle);

     //Setting the value of the transition along the x axis.
      translateTransition.setByX(300);

     //Setting the cycle count for the transition
      translateTransition.setCycleCount(50);

     //Setting auto reverse value to false
      translateTransition.setAutoReverse(false);

     //Playing the animation
      translateTransition.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("Translate 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);
   }
}

次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。

javac TranslateTransitionExample.java
java TranslateTransitionExample

実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。

トランジションの変換

これらに加えて、JavaFXは、ノードにより多くの遷移を適用するクラスを提供します。 以下は、JavaFXがサポートする他の種類の遷移です。

  • ノードリンクの属性に影響を与える遷移:/javafx/javafx_geometrical_transitions [Fade、Fill、Stroke]
  • 複数の基本的な遷移リンクを含む遷移:/javafx/javafx_sequential_parallel [Sequential、Parallel、Pause]
  • 指定されたパスリンクに沿ってオブジェクトを変換する遷移:/javafx/javafx_path_transition [Path Transition]