完成后如何反转动画？

Question

I have a list of animations and I want to be able to play them by clicking on a "next" button and playing them back by clicking a "previous" button. So I can play the first animation, then play the 2nd animation, then play the 2nd animation backwards and reach the position like after playing the first animation only.

My problem is that I can't reverse the animation after it's finished. I know that I can set autoReverse but then each animation will reverse immediately.

Here is an example for one animation:

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

After pressing "next" I want "previous" to move the ball back to its original position (so effectively x by -10 and y by -10) and not playing the "following" animation in reverse.

In practice, my animations animate different objects in the scenegraph and they can be parallel/sequential transitions. For the list I keep a current location index i and doing:

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

in an attempt to reverse the previous animation.

How can I do this?

To clarify, my list is of Animation . The TranslateTransition was just an example.

Answer 1

The issue here is using "relative" movement instead of absolute movement.

If you set byX = 10 the animation moves the node 10 to the right when played forward which means the proper way of reversing the animation would be to place the node at the end position immediately and then moving the node back to the original location before starting the animation.

Since you don't want to use the same animation over and over again finding the correct way to invert different animations could be difficult for animations using "relative" values. If you instead use absolute ones this shouldn't simply playing the animations backwards shouldn't cause any issues.

Example

@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

I managed to trick my way into "storing" the reverse cycle for later use using a PauseTransition that pauses the animation after the forward cycle. Then the animation can be played from the second cycle and it will reverse. Not the pretiest solution but it works (except for when you press the buttons too quickly. I tried to solve it with the comment code but it didn't quite get there so if anyone has a solution please tell)

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

I used the disable/enable buttons code from fabian (+1).

Answer 3

I found the quickest solution is to add a listener to the currentRateProperty, listen for it to change to -1 and pause the transition (after the first cycle completes). There is no cycleCompleted listener or any similar listener, but listening for the cycle to complete can be achieved that way. Note that the cycleCount must be set to 2 , and autoReverse must be set to true .

    Node node = ...;
    double byX = ...;
    
    TranslateTransition transition = new TranslateTransition();
    transition.setNode(node);
    transition.setCycleCount(2);
    transition.setAutoReverse(true);
    transition.setByX(byX);

    transition.currentRateProperty().addListener((obs, old, now) -> {
        if (now.intValue() == -1) {
            transition.pause();
        }
    });
    
    Button play = new Button("Play");
    play.setOnAction(event -> transition.play());

Note that both the forward and backward translation are triggered by the same method call transition.play() , hence there is only one button for both motions, but this of course can be changed. But personally, i like it that way.

In your case, it would look like this:

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.setAutoReverse(true);
        move.setCycleCount(2);
        move.setByX(10);
        move.setByY(10);

        move.currentRateProperty().addListener((obs, old, now) -> {
            if (now.intValue() == -1) {
                move.pause();
            }
        });

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

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

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

Answer 4

To reverse an animation in java, first you have to set the animation's autoReverse property to true and also set the cycleCount to 2. Below is a simple code snippet i wrote earlier that makes use of the things stated above.

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