如何设置多个节点之间有停顿的动画

Question

我正在尝试在循环中一个接一个地设置一系列节点的动画。目标是让第一个节点开始其动画，然后在下一个节点开始动画之前短暂暂停。

但是，当在循环中运行时，它执行得太快，所有节点似乎都在同时设置动画。

为了简单起见，我使用AnimateFX库来处理动画，但我认为这里需要的功能会应用于其他情况？

如何在每个HBox动画之间添加暂停？

import animatefx.animation.Bounce;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class AnimationTest extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) {
final VBox root = new VBox(10);
root.setAlignment(Pos.CENTER);
final HBox tiles = new HBox(5);
tiles.setAlignment(Pos.CENTER);
// Create 5 tiles
for (int i = 0; i < 5; i++) {
HBox tile = new HBox();
tile.setPrefSize(50, 50);
tile.setStyle("-fx-border-color: black; -fx-background-color: lightblue");
tiles.getChildren().add(tile);
}
Button button = new Button("Animate");
button.setOnAction(event -> {
// Animate each tile, one at a time
for (Node child : tiles.getChildren()) {
Bounce animation = new Bounce(child);
animation.play();
}
});
root.getChildren().add(tiles);
root.getChildren().add(button);
primaryStage.setWidth(500);
primaryStage.setHeight(200);
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
}

Answer 1

我不知道AnimateFX，但使用标准库可以将动画添加到SequentialTransition中。

例如，要设置每个节点的动画，但要在以后的时间开始，请将持续时间增加的PauseTransitions和所需的动画添加到SequentialTransitions，然后播放SequentialTransitions。

正如我所说，我不熟悉你正在使用的库，但我认为它看起来像这样：

Button button = new Button("Animate");
button.setOnAction(event -> {
Duration offset = Duration.millis(500);
Duration start = new Duration();
// Animate each tile, one at a time
for (Node child : tiles.getChildren()) {
Bounce bounce = new Bounce(child);
PauseTransition delay = new PauseTransition(start);
SequentialTransition animation = new SequentialTransition(delay, bounce.getTimeline());
animation.play();
start = start.add(offset);
}
});