java - 动画完成后如何反转？

Question

我有一个动画列表，我希望能够通过单击“下一个”按钮来播放它们，并通过单击“上一个”按钮来播放它们。所以我可以播放第一个动画，然后播放第二个动画，然后向后播放第二个动画，并达到仅播放第一个动画后的位置。

我的问题是动画完成后无法反转。我知道我可以设置 autoReverse 但每个动画都会立即反转。

以下是一个动画的示例:

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class AnimTest extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Circle c = new Circle(5, Color.RED);
        TranslateTransition move = new TranslateTransition(Duration.seconds(2), c);
        move.setByX(10);
        move.setByY(10);

        Button next = new Button("Next");
        Button previous = new Button("Previous");
        next.setOnAction(e -> {
            move.setRate(1);
            move.play();
        });
        previous.setOnAction(e -> {
            move.setRate(-1);
            move.play();
        });

        Pane p = new Pane(c);
        p.setPrefSize(50, 50);
        HBox buttons = new HBox(next, previous);
        VBox root = new VBox(p, buttons);
        stage.setScene(new Scene(root));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

按“下一个”后，我希望“上一个”将球移回其原始位置(因此实际上 x 移动 -10，y 移动 -10)，而不是反向播放“以下”动画。

在实践中，我的动画为场景图中的不同对象设置动画，它们可以是并行/顺序过渡。对于列表，我保留当前位置索引 i 并执行以下操作:

    next.setOnAction(e -> {
        Animation move = list.get(i);
        move.setRate(1);
        move.play();
        i++;
    });
    previous.setOnAction(e -> {
        i--;
        Animation move = list.get(i);
        move.setRate(-1);
        move.play();
    });

试图反转之前的动画。

我该怎么做？

澄清一下，我的列表是动画。 TranslateTransition 只是一个示例。

Answer 1

这里的问题是使用“相对”运动而不是绝对运动。

如果设置byX = 10，则动画在向前播放时会将节点 10 向右移动，这意味着反转动画的正确方法是将节点立即放置在结束位置，然后在开始动画之前将节点移回原始位置。

由于您不想一遍又一遍地使用相同的动画，因此对于使用“相对”值的动画来说，找到反转不同动画的正确方法可能很困难。如果您使用绝对动画，那么简单地向后播放动画不会导致任何问题。

示例

@Override
public void start(Stage stage) {
    Circle c = new Circle(5, Color.RED);

    // create alternating right/down movement animations with absolute movement
    List<Animation> animations = new ArrayList<>(10);
    for (int i = 0; i < 10; i++) {
        TranslateTransition move = new TranslateTransition(Duration.seconds(1), c);
        animations.add(move);
        int step = i >> 1;
        if ((i & 1) == 0) {
            move.setFromX(step * 10);
            move.setToX((step + 1) * 10);
        } else {
            move.setFromY(step * 10);
            move.setToY((step + 1) * 10);
        }
    }

    final ListIterator<Animation> iterator = animations.listIterator();
    
    Button next = new Button("Next");
    Button previous = new Button("Previous");
    previous.setDisable(true);
    
    next.setOnAction(e -> {
        Animation move = iterator.next();
        
        next.setDisable(!iterator.hasNext());
        previous.setDisable(false);
        
        move.setRate(1);
        move.play();
    });
    
    previous.setOnAction(e -> {
        Animation move = iterator.previous();
        
        next.setDisable(false);
        previous.setDisable(!iterator.hasPrevious());
        
        move.setRate(-1);
        move.play();
    });

    Pane p = new Pane(c);
    p.setPrefSize(100, 100);
    HBox buttons = new HBox(next, previous);
    VBox root = new VBox(p, buttons);
    stage.setScene(new Scene(root));
    stage.show();
}