如何为多个节点设置动画并在每个节点之间暂停？

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

如何为多个节点设置动画并在每个节点之间暂停？

How to animate several nodes with pause between each one?

animation

javafx