动画取决于之前的动画

Question

我正在尝试设置节点动画，这取决于该节点以及其他节点的先前动画 为了证明这个问题，我将使用一个简单的Pane与4个Label孩子：

主类以及模型和视图类：

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.CountDownLatch; 
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.geometry.Point2D;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.util.Duration;

public final class Puzzle extends Application{

    private Controller controller;
    @Override
    public void start(Stage stage) throws Exception {
        controller = new Controller();
        BorderPane root = new BorderPane(controller.getBoardPane());
        root.setTop(controller.getControlPane());
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

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

class View{

    private static final double size = 70;
    private static Duration animationDuration = Duration.millis(600);
    private int[][] cellModels;
    private Node[][] cellNodes;
    private CountDownLatch latch;
    Button play = new Button("Play");
    private Pane board, control = new HBox(play);;

    View(Model model) {
        cellModels = model.getCellModels();
        cellNodes = new Node[cellModels.length][cellModels[0].length];
        makeBoardPane();
        ((HBox) control).setAlignment(Pos.CENTER_RIGHT);
    }

    private void makeBoardPane() {

        board = new Pane();
        for (int row = 0; row < cellModels.length ; row ++ ) {
            for (int col = 0; col < cellModels[row].length ; col ++ ) {

               Label label = new Label(String.valueOf(cellModels[row][col]));
               label.setPrefSize(size, size);
               Point2D location = getLocationByRowCol(row, col);
               label.setLayoutX(location.getX());
               label.setLayoutY(location.getY());
               label.setStyle("-fx-border-color:blue");
               label.setAlignment(Pos.CENTER);
               cellNodes[row][col] = label;
               board.getChildren().add(label);
            }
        }
    }

    synchronized void updateCell(int id, int row, int column) {

        if(latch !=null) {
            try {
                latch.await();
            } catch (InterruptedException ex) { ex.printStackTrace();}
        }
        latch = new CountDownLatch(1);

        Node node = getNodesById(id).get(0);
        Point2D newLocation = getLocationByRowCol(row, column);
        Point2D moveNodeTo = node.parentToLocal(newLocation );

        TranslateTransition transition = new TranslateTransition(animationDuration, node);
        transition.setFromX(0); transition.setFromY(0);
        transition.setToX(moveNodeTo.getX());
        transition.setToY(moveNodeTo.getY());

        //set animated node layout to the translation co-ordinates:
        //https://stackoverflow.com/a/30345420/3992939
        transition.setOnFinished(ae -> {
            node.setLayoutX(node.getLayoutX() + node.getTranslateX());
            node.setLayoutY(node.getLayoutY() + node.getTranslateY());
            node.setTranslateX(0);
            node.setTranslateY(0);
            latch.countDown();
        });
        transition.play();
    }

    private List<Node> getNodesById(int...ids) {

        List<Node> nodes = new ArrayList<>();
        for(Node node : board.getChildren()) {
            if(!(node instanceof Label)) { continue; }
            for(int id : ids) {
                if(((Label)node).getText().equals(String.valueOf(id))) {
                    nodes.add(node);
                    break;
                }
            }
        }
        return nodes ;
    }

    private Point2D getLocationByRowCol(int row, int col) {
        return new Point2D(size * col, size * row);
    }

    Pane getBoardPane() { return board; }
    Pane getControlPane() { return control;}
    Button getPlayBtn() {return play ;}
}

class Model{

    private int[][] cellModels = new int[][] { {0,1}, {2,3} };
    private SimpleObjectProperty<int[][]> cellModelsProperty =
            cellModelsProperty = new SimpleObjectProperty<>(cellModels);

    void addChangeListener(ChangeListener<int[][]> listener) {
        cellModelsProperty.addListener(listener);
    }

    int[][] getCellModels() {
        return  (cellModelsProperty == null) ? null : cellModelsProperty.get();
    }

    void setCellModels(int[][] cellModels) {
        cellModelsProperty.set(cellModels);
    }
}

和控制器类：

import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.layout.Pane;

class Controller {

    private View view ;
    private Model model;


    Controller() {
        model = new Model();
        model.addChangeListener(getModelCangeListener());//observe model changes
        view = new View(model);
        view.getPlayBtn().setOnAction( a -> shuffle());  //animation works fine
        //view.getPlayBtn().setOnAction( a -> IntStream.
        //        range(0,4).forEach( (i)-> shuffle())); //messes the animation
    }

    private ChangeListener<int[][]> getModelCangeListener() {

        return  (ObservableValue<? extends int[][]> observable,
                int[][] oldValue, int[][] newValue)-> {
                    for (int row = 0; row < newValue.length ; row++) {
                        for (int col = 0; col < newValue[row].length ; col++) {
                            if(newValue[row][col] != oldValue[row][col]) {
                                final int fRow = row, fCol = col;
                                new Thread( () -> view.updateCell(
                                    newValue[fRow][fCol], fRow, fCol)).start();
                            }
                        }
                    }
                };
    }

    void shuffle() {
        int[][] modelData = model.getCellModels();
        int rows = modelData.length, columns = modelData[0].length;
        int[][] newModelData = new int[rows][columns];
        for (int row = 0; row < rows ; row ++) {
            for (int col = 0; col < columns ; col ++) {
                int colIndex = ((col+1) < columns ) ? col + 1  : 0;
                int rowIndex =  ((col+1) < columns ) ?  row : ((row + 1) < rows) ? row +1 : 0;
                newModelData[row][col] = modelData[rowIndex][colIndex];
            }
        }

        model.setCellModels(newModelData);
    }

    Pane getBoardPane() { return view.getBoardPane(); }

    Pane getControlPane() { return view.getControlPane(); }
}

播放按钮处理程序更改模型数据（请参阅shuffle()），更改触发ChangeListener。 ChangeListener通过在单独的线程上调用view.updateCell(..)来动画每个更改的标签。这一切都按预期工作。
当我尝试运行几个连续的模型更新（shuffle()）时，问题就出现了。为了模拟它，我改变了

view.getPlayBtn().setOnAction( a -> shuffle()); 

与

view.getPlayBtn().setOnAction( a -> IntStream.range(0,4).forEach( (i)-> shuffle()));

会混淆动画（它以错误的顺序播放并最终处于错误的位置）。
这样做不令人惊讶：要正常工作动画必须以特定顺序播放：只有在所有四个标签完成之前的动画后，才能重新制作标签。
发布的代码在线程上运行每个更新，因此不保证执行顺序。

我的问题是实现多节点和多个动画所需序列的正确方法是什么？

我看了SequentialTransition，但我无法弄清楚它是如何用来克服这个问题的。
我确实提出了一个解决方案，我将作为答案发布，因为这篇文章的篇幅很长，而且我认为解决方案并不好。

Answer 1

您的代码不遵守分离原则。 （或者至少你做得不好。）

动画应该仅由视图和视图完成，而不是在控制器和视图之间进行协作。将所有动画放在View类中安排动画。

SequentialTransition可以在一个动画中包含多个动画，然后按顺序播放它们，但它不应该成为控制器的关注点。

public class View {

    private static final double SIZE = 70;
    private static final Duration ANIMATION_DURATION = Duration.millis(600);

    private final Map<Integer, Label> labelsById = new HashMap<>(); // stores labels by id
    private final Button play = new Button("Play");
    private Pane board;
    private final HBox control;

    private final Timeline animation;
    private final LinkedList<ElementPosition> pendingAnimations = new LinkedList<>(); // stores parameter combination for update calls

    private Node animatedNode;

    public View(int[][] cellModels) { // we don't really need the whole model here
        makeBoardPane(cellModels);

        this.control = new HBox(play);
        control.setAlignment(Pos.CENTER_RIGHT);

        final DoubleProperty interpolatorValue = new SimpleDoubleProperty();

        animation = new Timeline(
                new KeyFrame(Duration.ZERO, evt -> {
                    ElementPosition ePos = pendingAnimations.removeFirst();
                    animatedNode = labelsById.get(ePos.id);

                    Point2D newLocation = getLocationByRowCol(ePos.row, ePos.column);

                    // create binding for layout pos
                    animatedNode.layoutXProperty().bind(
                            interpolatorValue.multiply(newLocation.getX() - animatedNode.getLayoutX())
                                    .add(animatedNode.getLayoutX()));
                    animatedNode.layoutYProperty().bind(
                            interpolatorValue.multiply(newLocation.getY() - animatedNode.getLayoutY())
                                    .add(animatedNode.getLayoutY()));
                }, new KeyValue(interpolatorValue, 0d)),
                new KeyFrame(ANIMATION_DURATION, evt -> {
                    interpolatorValue.set(1);

                    // remove bindings
                    animatedNode.layoutXProperty().unbind();
                    animatedNode.layoutYProperty().unbind();

                    animatedNode = null;

                    if (pendingAnimations.isEmpty()) {
                        // abort, if no more animations are pending
                        View.this.animation.stop();
                    }
                }, new KeyValue(interpolatorValue, 1d)));
        animation.setCycleCount(Animation.INDEFINITE);
    }

    private void makeBoardPane(int[][] cellModels) {
        board = new Pane();
        for (int row = 0; row < cellModels.length; row++) {
            for (int col = 0; col < cellModels[row].length; col++) {
                Point2D location = getLocationByRowCol(row, col);
                int id = cellModels[row][col];

                Label label = new Label(Integer.toString(id));
                label.setPrefSize(SIZE, SIZE);
                label.setLayoutX(location.getX());
                label.setLayoutY(location.getY());
                label.setStyle("-fx-border-color:blue");
                label.setAlignment(Pos.CENTER);

                labelsById.put(id, label);

                board.getChildren().add(label);
            }
        }
    }

    private static class ElementPosition {

        private final int id;
        private final int row;
        private final int column;

        public ElementPosition(int id, int row, int column) {
            this.id = id;
            this.row = row;
            this.column = column;
        }

    }

    public void updateCell(int id, int row, int column) {
        pendingAnimations.add(new ElementPosition(id, row, column));
        animation.play();
    }

    private static Point2D getLocationByRowCol(int row, int col) {
        return new Point2D(SIZE * col, SIZE * row);
    }

    public Pane getBoard() {
        return board;
    }

    public Pane getControlPane() {
        return control;
    }

    public Button getPlayBtn() {
        return play;
    }
}

复杂性降低的使用示例：

private int[][] oldValue;

@Override
public void start(Stage primaryStage) {
    List<Integer> values = new ArrayList<>(Arrays.asList(0, 1, 2, 3));
    oldValue = new int[][]{{0, 1}, {2, 3}};
    View view = new View(oldValue);
    Button btn = new Button("Shuffle");

    btn.setOnAction((ActionEvent event) -> {
        Collections.shuffle(values);
        int[][] newValue = new int[2][2];
        for (int i = 0; i < 2 * 2; i++) {
            newValue[i / 2][i % 2] = values.get(i);
        }
        System.out.println(values);

        for (int row = 0; row < newValue.length; row++) {
            for (int col = 0; col < newValue[row].length; col++) {
                if (newValue[row][col] != oldValue[row][col]) {
                    view.updateCell(newValue[row][col], row, col);
                }
            }
        }
        oldValue = newValue;
    });

    Scene scene = new Scene(new BorderPane(view.getBoard(), null, view.getControlPane(), btn, null));

    primaryStage.setScene(scene);
    primaryStage.show();
}

Answer 2

我想出的解决方案涉及控制更新线程的执行顺序。
Todo我通过实现基于this的内部类来更改控制器类 所以回答。请参阅以下代码中的UpdateView 我还修改了getModelCangeListener()以使用UpdateView：

import java.util.stream.IntStream; 
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.layout.Pane;

class Controller {   
    private View view ;
    private Model model;
    private static int threadNumber = 0, threadAllowedToRun = 0;
    private static final Object myLock = new Object();

    Controller() {
        model = new Model();
        model.addChangeListener(getModelCangeListener());//observe model changes
        view = new View(model);
        view.getPlayBtn().setOnAction( a -> IntStream.
                                          range(0,4).forEach( (i)-> shuffle())); 
    }

    private ChangeListener<int[][]> getModelCangeListener() {

        return  (ObservableValue<? extends int[][]> observable,
                int[][] oldValue, int[][] newValue)-> {
                    for (int row = 0; row < newValue.length ; row++) {
                        for (int col = 0; col < newValue[row].length ; col++) {
                            if(newValue[row][col] != oldValue[row][col]) {
                                final int fRow = row, fCol = col;
                                new Thread( new UpdateView(
                                        newValue[fRow][fCol], fRow, fCol)).start();
                            }
                        }
                    }
                };
    }

    private void shuffle() {
        int[][] modelData = model.getCellModels();
        int rows = modelData.length, columns = modelData[0].length;
        int[][] newModelData = new int[rows][columns];
        for (int row = 0; row < rows ; row ++) {
            for (int col = 0; col < columns ; col ++) {
                int colIndex = ((col+1) < columns ) ? col + 1  : 0;
                int rowIndex =  ((col+1) < columns ) ?  row : ((row + 1) < rows) ? row +1 : 0;
                newModelData[row][col] = modelData[rowIndex][colIndex];
            }
        }

        model.setCellModels(newModelData);
    }

    Pane getBoardPane() { return view.getBoardPane(); }

    Pane getControlPane() { return view.getControlPane(); }

    //https://stackoverflow.com/a/23097860/3992939
    class UpdateView implements Runnable {

        private int id, row, col, threadID;

        UpdateView(int id, int row, int col) {
            this.id = id;  this.row = row;  this.col = col;
            threadID = threadNumber++;
        }

        @Override
        public void run() {
            synchronized (myLock) {
                while (threadID != threadAllowedToRun) {
                    try {
                        myLock.wait();
                    } catch (InterruptedException e) {}
                }
                view.updateCell(id, row, col);
                threadAllowedToRun++;
                myLock.notifyAll();
            }
        }
    }
}

虽然它是一种可能的解决方案，但我认为基于JavaFx自己的工具的解决方案更可取。

Answer 3

以下答案基于this回答。我重构了它，把它分解成更小，更冗长的“碎片”，这使它（对我来说）更容易理解。
我发布它希望它也会帮助其他人。

import java.util.LinkedList;
import java.util.stream.IntStream;
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Point2D;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.util.Duration;

public final class Puzzle extends Application{

    private Controller controller;
    @Override
    public void start(Stage stage) throws Exception {
        controller = new Controller();
        BorderPane root = new BorderPane(controller.getBoardPane());
        root.setTop(controller.getControlPane());
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

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

class Controller {

    private View view ;
    private Model model;

    Controller() {
        model = new Model();
        model.addChangeListener(getModelCangeListener());//observe model changes
        view = new View(model);
        view.getPlayBtn().setOnAction( a -> IntStream.
                                range(0,4).forEach( (i)-> shuffle()));
    }

    private ChangeListener<int[][]> getModelCangeListener() {

        return  (ObservableValue<? extends int[][]> observable,
            int[][] oldValue, int[][] newValue)-> {
                for (int row = 0; row < newValue.length ; row++) {
                    for (int col = 0; col < newValue[row].length ; col++) {
                        if(newValue[row][col] != oldValue[row][col]) {
                            view.updateCell(newValue[row][col], row, col);
                        }
                    }
                }
            };
    }

    private void shuffle() {
        int[][] modelData = model.getCellModels();
        int rows = modelData.length, columns = modelData[0].length;
        int[][] newModelData = new int[rows][columns];
        for (int row = 0; row < rows ; row ++) {
            for (int col = 0; col < columns ; col ++) {
                int colIndex = ((col+1) < columns ) ? col + 1  : 0;
                int rowIndex =  ((col+1) < columns ) ?  row : ((row + 1) < rows) ? row +1 : 0;
                newModelData[row][col] = modelData[rowIndex][colIndex];
            }
        }
        model.setCellModels(newModelData);
    }

    Pane getBoardPane() { return view.getBoardPane(); }

    Pane getControlPane() { return view.getControlPane(); }
}

class View{

    private final Timeline timeLineAnimation;// private final Timeline timeLineAnimation;
    private final LinkedList<ElementPosition> pendingAnimations = new LinkedList<>(); // stores parameter combination for update calls
    private static final Duration ANIMATION_DURATION = Duration.millis(600);
    private static final double SIZE = 70;
    private int[][] cellModels;

    private final Button play = new Button("Play");
    private Pane board, control = new HBox(play);
    Node animatedNode;

    View(Model model) {
        cellModels = model.getCellModels();
        makeBoardPane();
        ((HBox) control).setAlignment(Pos.CENTER_RIGHT);
        timeLineAnimation = new TimeLineAnimation().get();
    }

    private void makeBoardPane() {

        board = new Pane();
        for (int row = 0; row < cellModels.length ; row ++ ) {
            for (int col = 0; col < cellModels[row].length ; col ++ ) {
               int id = cellModels[row][col];
               Label label = new Label(String.valueOf(id));
               label.setPrefSize(SIZE, SIZE);
               Point2D location = getLocationByRowCol(row, col);
               label.setLayoutX(location.getX());
               label.setLayoutY(location.getY());
               label.setStyle("-fx-border-color:blue");
               label.setAlignment(Pos.CENTER);
               label.setId(String.valueOf(id));
               board.getChildren().add(label);
            }
        }
    }

    public void updateCell(int id, int row, int column) {
        pendingAnimations.add(new ElementPosition(id, row, column));
        timeLineAnimation.play();
    }

    private Node getNodeById(int id) {

        return board.getChildren().filtered(n ->
            Integer.valueOf(n.getId()) == id).get(0);
    }

    private Point2D getLocationByRowCol(int row, int col) {
        return new Point2D(SIZE * col, SIZE * row);
    }

    Pane getBoardPane() { return board; }
    Pane getControlPane() { return control;}
    Button getPlayBtn() {return play ;}

    private static class ElementPosition {

        private final int id, row, column;

        public ElementPosition(int id, int row, int column) {
            this.id = id;
            this.row = row;
            this.column = column;
        }
    }

    class TimeLineAnimation {

        private final Timeline timeLineAnimation;
        //value to be interpolated by time line
        final DoubleProperty interpolatorValue = new SimpleDoubleProperty();
        private Node animatedNode;

        TimeLineAnimation() {
            timeLineAnimation = new Timeline(getSartKeyFrame(), getEndKeyFrame());
            timeLineAnimation.setCycleCount(Animation.INDEFINITE);
        }

        // a 0 duration event, used to do the needed setup for next key frame
        private KeyFrame getSartKeyFrame() {

            //executed when key frame ends
            EventHandler<ActionEvent> onFinished = evt -> {

                //protects against "playing" when no pending animations
                if(pendingAnimations.isEmpty()) {
                    timeLineAnimation.stop();
                    return;
                };
                ElementPosition ePos = pendingAnimations.removeFirst();
                animatedNode = getNodeById(ePos.id);

                Point2D newLocation = getLocationByRowCol(ePos.row, ePos.column);

                // bind x,y layout properties interpolated property interpolation effects
                //both x and y
                animatedNode.layoutXProperty().bind(
                        interpolatorValue.multiply(newLocation.getX() - animatedNode.getLayoutX())
                                .add(animatedNode.getLayoutX()));
                animatedNode.layoutYProperty().bind(
                        interpolatorValue.multiply(newLocation.getY() - animatedNode.getLayoutY())
                                .add(animatedNode.getLayoutY()));
            };

            KeyValue startKeyValue = new KeyValue(interpolatorValue, 0d);
            return new KeyFrame(Duration.ZERO, onFinished, startKeyValue);
        }

        private KeyFrame getEndKeyFrame() {

            //executed when key frame ends
            EventHandler<ActionEvent> onFinished =evt -> {
                // remove bindings
                animatedNode.layoutXProperty().unbind();
                animatedNode.layoutYProperty().unbind();
            };

            KeyValue endKeyValue = new KeyValue(interpolatorValue, 1d);
            return new KeyFrame(ANIMATION_DURATION, onFinished, endKeyValue);
        }

        Timeline get() { return timeLineAnimation;  }
    }
}

class Model{

    private int[][] cellModels = new int[][] { {0,1}, {2,3} };
    private SimpleObjectProperty<int[][]> cellModelsProperty =
            cellModelsProperty = new SimpleObjectProperty<>(cellModels);

    void addChangeListener(ChangeListener<int[][]> listener) {
        cellModelsProperty.addListener(listener);
    }

    int[][] getCellModels() {
        return  (cellModelsProperty == null) ? null : cellModelsProperty.get();
    }

    void setCellModels(int[][] cellModels) { cellModelsProperty.set(cellModels);}
}

（运行复制将整个代码粘贴到Puzzle.java中）