如何为矩形对象的height属性设置动画？

Question

我想要的东西真的很简单，但找不到任何解决方案。 我是JavaFX的新手，并且我正在使用动画。 我想做的是给一个容器添加水以动画效果，必须将水填充到顶部，然后再降下来，依此类推。 这就是我所做的（这只是“水”，我还没有对容器进行编程，我想首先获得正确的动画）

public class FormTest extends Application {

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

@Override
public void start(Stage primaryStage) throws Exception {
    primaryStage.setTitle("The container test");
    primaryStage.setHeight(600);
    primaryStage.setWidth(600);
    Pane pane = new Pane();
    Rectangle rect = new Rectangle(207,327,192,42);
    rect.setFill(Color.CYAN);
    Timeline tl = new Timeline();
    tl.setCycleCount(Timeline.INDEFINITE);
    tl.setAutoReverse(true);

    KeyValue k1 = new KeyValue(rect.heightProperty(),300);
    KeyFrame kf1 = new KeyFrame(Duration.millis(1000),k1);
    tl.getKeyFrames().add(kf1);
    tl.play();
    pane.getChildren().addAll(rect);
    primaryStage.setScene(new Scene(pane));
    primaryStage.show();

}}

问题是“水”以相反的方向（向下）进行动画处理，到目前为止，时间线是我迄今为止想要实现的唯一动画。 如何使“水”上升而不是下降？ 提前致谢

Answer 1

您希望矩形的底部保持固定：最初是327 + 42 = 369。 因此，您需要更改y以便在height变化时始终为y+height=369 ，即您希望y=-height+369 ：

rect.yProperty().bind(rect.heightProperty().multiply(-1).add(369));

Answer 2

由于要移动顶部而不是底部，但是Rectangle的原点位于左上方，因此还需要设置y属性的动画，以在height增加时减小：

KeyValue k1 = new KeyValue(rect.heightProperty(), 300);
KeyValue kv = new KeyValue(rect.yProperty(), rect.getY()-300+rect.getHeight());
KeyFrame kf1 = new KeyFrame(Duration.millis(1000), k1, kv);