Javafx 简明教程

JavaFX - Sequential Transition

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

You can apply one transition on a JavaFX node, or multiple transitions together. However, there are two different ways when you want to apply multiple transitions on a single node.

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

Sequential transition is applied on a JavaFX node when you want to apply multiple transitions on a JavaFX node one after the other. For instance, you can first increase or decrease the size of a shape using Scale Transition and then fade it out using Fade Transition. You can pause for while between these animations using Pause Transition (which we will learn about in further chapters.

Sequential Transition in JavaFX

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

SequentialTransition class is used to play multiple transitions on a JavaFX node in a sequential order. This class belongs to the javafx.animation package. All the transitions applied on the node are child transitions of this class that inherit its node property (only if their own node property is not specified).

Example

以下是展示 JavaFX 中顺序转换的程序。将此代码保存在名为 SequentialTransitionExample.java 的文件中。

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);
   }
}

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

Compile and execute the saved java file from the command prompt using the following commands.

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

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

On executing, the above program generates a JavaFX window as shown below.

sequential transition