Javafx 简明教程

JavaFX - Parallel Transition

正如我们之前了解的，JavaFX 允许你在节点上应用多个转换。这可以通过一次应用一个转换（称为顺序转换）或一次应用多个转换（称为并行转换）来完成。

As we learned previously, JavaFX allows you to apply multiple transitions on a node. This can be done by applying one transition at a time (called sequential transitions) or applying multiple transitions at a time (called parallel transitions).

并行转换顾名思义，它一次在一个对象上应用多个转换。例如，应用这些转换的 JavaFX 节点可以在从一个地方移动到另一个地方时增长。这可以通过一起应用缩放和平移转换来实现。

Parallel transitions, like its name suggests, applies more than one transition on a single object at one parallelly. For instance, the JavaFX node on which these transitions are applied, can grow in size while moving from one place to another. This can be achieved by applying Scale and Translate transitions together.

让我们在这章详细了解并行转换。

Let us learn more about parallel transitions elaborately in this chapter.

Parallel Transition

ParallelTransition 类用于在 JavaFX 节点上并行播放多个转换。此类属于 javafx.animation 包。应用于节点上的所有转换都是此类的子转换，此类继承了节点属性；如果未指定节点属性。

ParallelTransition class is used to play multiple transitions parallelly on a JavaFX node. 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; if their node property is not specified.

Example

下面是演示 JavaFX 中并行转换的程序。将此代码保存在名为 parallelTransitionExample.java 的文件中。

Following is the program which demonstrates Parallel Transition in JavaFX. Save this code in a file with the name parallelTransitionExample.java.

import javafx.animation.ParallelTransition;
import javafx.animation.PathTransition;
import javafx.animation.ScaleTransition;
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.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;

import javafx.stage.Stage;
import javafx.util.Duration;

public class parallelTransitionExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Rectangle
      Rectangle rectangle = new Rectangle();

      //Setting the position of the rectangle
      rectangle.setX(75.0f);
      rectangle.setY(75.0f);

      //Setting the width of the rectangle
      rectangle.setWidth(100.0f);

      //Setting the height of the rectangle
      rectangle.setHeight(100.0f);

      //setting the color of the rectangle
      rectangle.setFill(Color.BLUEVIOLET);

      //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 of the transition
      pathTransition.setDuration(Duration.millis(1000));

      //Setting the node for the transition
      pathTransition.setNode(rectangle);

      //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
      translateTransition.setDuration(Duration.millis(1000));

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

      //Setting the axis and length of the transition
      translateTransition.setByX(300);

      //Setting the cycle count of the transition
      translateTransition.setCycleCount(5);

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

      //Creating scale Transition
      ScaleTransition scaleTransition = new ScaleTransition();

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

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

      //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 true
      scaleTransition.setAutoReverse(false);

      //Applying parallel Translation to the circle
      ParallelTransition parallelTransition = new ParallelTransition(
         rectangle, pathTransition, translateTransition, scaleTransition );

      //Playing the animation
      parallelTransition.play();

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

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

      //Setting title to the Stage
      stage.setTitle("Parallel 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 parallelTransitionExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls parallelTransitionExample

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

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

parallel transition