JavaFX矩形宽度动画

Question

只是一个问题......是否可以将矩形宽度的变化显示为动画？矩形本身就是一个状态栏，因此两个x方向的刻度都不起作用。

THX

Answer 1

一种方法是在Timeline内设置宽度修改动画，而不是在两个方向上缩放。您可以通过修改Rectangle的父对齐

的对齐来模拟方向

对齐值：

• Pos.CENTER：看起来好像两个方向都发生了变化
• Pos.CENTER_LEFT：看起来似乎是从右侧发生的变化
• Pos.CENTER_RIGHT：看起来好像是从左侧发生了变化

通过试验对齐，您可以选择最适合当前状态栏的那个

<小时/> 视觉表示：

对齐顺序：Right | Center | Left

SSCCE：

public class RectangleWidthAnimation extends Application{
    @Override
    public void start(Stage primaryStage) throws Exception {
        Rectangle statusBar = new Rectangle(300, 100);
        Button animationButton = new Button("Animate width decrease by 25");
        animationButton.setOnAction(event -> {
            System.out.println("Animation start: width = " + statusBar.getWidth());
            KeyValue widthValue = new KeyValue(statusBar.widthProperty(), statusBar.getWidth() - 25);
            KeyFrame frame = new KeyFrame(Duration.seconds(2), widthValue);
            Timeline timeline = new Timeline(frame);
            timeline.play();
            timeline.setOnFinished(finishedEvent -> System.out.println("Animation end: width = " + statusBar.getWidth()));
        });

        VBox container = new VBox(10, statusBar, animationButton);

        //Experiment with these alignments
        container.setAlignment(Pos.CENTER);
        //container.setAlignment(Pos.CENTER_LEFT);
        //container.setAlignment(Pos.CENTER_RIGHT);

        primaryStage.setScene(new Scene(container, 350, 150));
        primaryStage.show();
    }
}

<小时/> 上述方法的替代方法可以是使用过渡，您可以阅读有关here

的内容