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

按下“ next”后，我希望“ previous”将球移回其原始位置（因此有效地将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();
    });

试图反转上一个动画。

我该怎么做？

为了澄清，我的名单是Animation。 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();
}

Answer 2

我设法用PauseTransition来“存储”反向循环以供以后使用，该import java.util.ArrayList; import java.util.List; import javafx.animation.Animation; import javafx.animation.ParallelTransition; import javafx.animation.PauseTransition; import javafx.animation.TranslateTransition; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Label; 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 { int current = 0; final int size = 5; @Override public void start(Stage stage) throws Exception { Circle c = new Circle(10, Color.RED); List<Animation> animations = new ArrayList<>(size); for (int i = 0; i < size; i++) { TranslateTransition move = new TranslateTransition(Duration.seconds(1), c); move.setByX(20); move.setByY(20); PauseTransition pauser = new PauseTransition(move.getCycleDuration()); ParallelTransition parallel = new ParallelTransition(move, pauser); pauser.setOnFinished(e -> parallel.pause()); parallel.setCycleCount(2); parallel.setAutoReverse(true); animations.add(parallel); } Button next = new Button("Next"); Button previous = new Button("Previous"); previous.setDisable(true); Label l = new Label(current + ""); next.setOnAction(e -> { next.setDisable(current == size - 1); previous.setDisable(false); /* if (current > 0) { Animation last = animations.get(current - 1); last.jumpTo(last.getCycleDuration()); }*/ Animation cur = animations.get(current); cur.playFromStart(); current++; l.setText(current + ""); }); previous.setOnAction(e -> { current--; l.setText(current + ""); next.setDisable(false); previous.setDisable(current == 0); /* if (current < size - 1) { Animation last = animations.get(current + 1); last.stop(); }*/ Animation cur = animations.get(current); cur.play(); }); Pane p = new Pane(c); p.setPrefSize(200, 200); HBox buttons = new HBox(5, next, previous, l); VBox root = new VBox(p, buttons); stage.setScene(new Scene(root)); stage.show(); } public static void main(String[] args) { launch(args); } }在向前循环之后暂停动画。然后可以从第二个周期开始播放动画，并且动画将反向播放。并非最出色的解决方案，但它可以工作（除非您过快地按下按钮。我试图用注释代码解决它，但还没有到位，所以如果有人有解决方案，请告诉我们）

fig = plt.figure(figsize=(8,4))
ax1 = fig.add_subplot(121)
ax1.set_xlabel('Credit_History')
ax1.set_ylabel('Count of Applicants')
ax1.set_title("Applicants by Credit History")
temp1.plot(kind='bar')

ax2 = fig.add_subplot(122)
ax2.set_xlabel('Credit_History')
ax2.set_ylabel('Probability of getting loan')
ax2.set_title('Probability of getting loan by Credit History')
temp2.plot(kind='bar')

我使用了来自fabian（+1）的禁用/启用按钮代码。

Answer 3

要在Java中反转动画，首先必须将动画的autoReverse属性设置为true，然后将cycleCount设置为2。下面是我之前编写的一个简单的代码段，它利用了上面提到的内容。

    ScaleTransition scaleTransition = new ScaleTransition(duration, btn);
    scaleTransition.setByX(1.2);
    scaleTransition.setByY(1.2);
    scaleTransition.setAutoReverse(true);
    scaleTransition.setCycleCount(2);
    scaleTransition.play();

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

3 个答案:

示例