JavaFx-交互式排序应用程序

我正在开发一个交互式排序应用程序。我必须将数字表示为矩形，例如，当排序算法运行时，当两个数字交换时，必须交换矩形。我想用动画来做这个。如何交换矩形？我目前正在使用transition进行测试，但我有一些问题。我一组有两个矩形。当我尝试交换矩形时，两者都会在中间相遇并停止。代码如下：

    Rectangle r1 = rectangles.get(numbers[0]);
    Rectangle r2 = rectangles.get(numbers[1]);

    TranslateTransition translateTransition = new TranslateTransition();

    translateTransition.setNode(r1);
    translateTransition.setDuration(Duration.millis(1000));
    translateTransition.setFromX(r1.getX());
    translateTransition.setToX(r2.getX());

    TranslateTransition translateTransition2 = new TranslateTransition();

    translateTransition2.setNode(r2);
    translateTransition2.setDuration(Duration.millis(1000));
    translateTransition2.setFromX(r2.getX());
    translateTransition2.setToX(r1.getX());
    translateTransition2.play();

    translateTransition.play();

---

我需要一个类似画布的窗格。我需要能够设置矩形坐标。

TranslateTransition

使用节点的

translateX

属性。因此，如果您使用

setLayout

定位矩形，

重新定位

或仅使用构造函数参数TranslateTransition将不适用于您

您需要开始使用

translateX

坐标，或者使用

Timeline

而不是

TranslateTransition

您可以阅读更多关于布局的信息，并在中进行翻译

以下是基于translateX的交换示例：

public void start(Stage primaryStage) {
    final Rectangle r1 = new Rectangle(50, 50, Color.RED);
    final Rectangle r2 = new Rectangle(50, 50, Color.BLUE);

    // note I use translate to position rectangles
    r1.setTranslateX(50);
    r2.setTranslateX(250);

    Button btn = new Button();
    btn.setText("Move it");
    btn.relocate(100, 100);
    btn.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            double x1 = r1.getTranslateX();
            double x2 = r2.getTranslateX();

            TranslateTransition translateTransition = new TranslateTransition();
            translateTransition.setNode(r1);
            translateTransition.setDuration(Duration.millis(1000));
            translateTransition.setToX(x2);

            TranslateTransition translateTransition2 = new TranslateTransition();
            translateTransition2.setNode(r2);
            translateTransition2.setDuration(Duration.millis(1000));
            translateTransition2.setToX(x1);

            translateTransition2.play();
            translateTransition.play();
        }
    });

    Pane root = new Pane();
    root.getChildren().addAll(btn, r1, r2);

    Scene scene = new Scene(root, 400, 350);

    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

公共作废开始（阶段primaryStage）{
最终矩形r1=新矩形（50，50，颜色为红色）；
最终矩形r2=新矩形（50，50，颜色为蓝色）；
//注意：我使用“平移”来定位矩形
r1.setTranslateX（50）；
r2.setTranslateX（250）；
按钮btn=新按钮（）；
btn.setText（“移动它”）；
btn.重新安置（100100）；
btn.setOnAction（新的EventHandler（）{
@凌驾
公共无效句柄（ActionEvent事件）{
double x1=r1.getTranslateX（）；
double x2=r2.getTranslateX（）；
TranslateTransition TranslateTransition=新的TranslateTransition（）；
translateTransition.setNode（r1）；
translateTransition.setDuration（Duration.millis（1000））；
setToX（x2）；
TranslateTransition translateTransition2=新的TranslateTransition（）；
translateTranslation2.setNode（r2）；
translateTranslation2.setDuration（Duration.millis（1000））；
翻译2.setToX（x1）；
play（）；
play（）；
}
});
窗格根=新窗格（）；
root.getChildren（）.addAll（btn、r1、r2）；
场景=新场景（root，400350）；
setTitle（“你好，世界！”）；
初级阶段。场景（场景）；
primaryStage.show（）；
}

你想用一些动画来交换它还是仅仅改变颜色？我想要一些动画。我不想要即时交换。