如何使用时间轴为按钮制作动画？

Question

我想为按钮设置动画。 我要使其单击后更改其位置。 我写了这样的代码，但是不起作用。 在这种情况下，控制台中不会出现任何错误。 该按钮只是不响应按下。

double stopPosition = 100;
KeyValue kk2 = new KeyValue(btn.layoutXProperty(), stopPosition, Interpolator.LINEAR);
KeyFrame kk = new KeyFrame(Duration.millis(5000),kk2);
Timeline timeline = new Timeline();
timeline.getKeyFrames().add(kk);
timeline.setCycleCount(1);

        btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
                timeline.play();
            }
        });

我究竟做错了什么？

Answer 1

我假设您将按钮放置在某种布局中，以便进行定位。 如果您修改layoutX则意味着在下一次布局传递期间， Button会简单地由父布局放回“它所属的位置”。

如果要移动Button ，则应选择其他布局作为父级，或改为使用translateX属性。 translateX将Button相对于父布局将其放置的位置（ layoutX ）移动。

Answer 2

您应该设置平移坐标的动画，而不是布局坐标的动画。

double deltaPosition = 100; //translation gets added to your current layoutX
KeyValue kk2 = new KeyValue(btn.translateXProperty(), deltaPosition, Interpolator.LINEAR);
KeyFrame kk = new KeyFrame(Duration.millis(5000),kk2);
Timeline timeline = new Timeline();
timeline.getKeyFrames().add(kk);
timeline.setCycleCount(1);

btn.setOnAction(ae -> {
        System.out.println("Hello World!");
        timeline.play();
    }
);

布局值会被诸如HBox ， AnchorPane类的布局窗格覆盖，但不会被Group或Pane覆盖。 或者，在按钮上设置setManaged(false) ，以便父容器不会干扰其布局，但是，您必须自己进行所有布局。