Javafx 简明教程

JavaFX - Sequential Transition

您可以在 JavaFX 节点或多个过渡一起应用一个转换。但是，在您想要对单个节点应用多个过渡时，有两种不同的方法。

如果您想要在一个接一个地对 JavaFX 节点应用多个转换，则对 JavaFX 节点应用顺序转换。例如，您首先可以使用缩放过渡来增加或减小一个形状的大小，然后使用淡出过渡使它淡出。您可以使用暂停过渡在这些动画中暂停一段时间（我们将在以后的章节中学习它。

Sequential Transition in JavaFX

SequentialTransition 类用于按顺序在 JavaFX 节点上播放多个转换。该类属于 javafx.animation 包。应用于该节点的所有转换都是该类的子转换，它们继承了该类的节点属性（仅在其自己的节点属性未指定的情况下）。

Example

以下是展示 JavaFX 中顺序转换的程序。将此代码保存在名为 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);
   }
}

使用以下命令，从命令提示符编译并执行已保存的 java 文件。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls SequentialTransitionExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls SequentialTransitionExample

执行后，上述程序会生成如下所示的 JavaFX 窗口。

sequential transition