JavaFX 矩形宽度动画答案

【问题标题】：JavaFX rectangle width animationJavaFX 矩形宽度动画
【发布时间】：2016-09-29 23:54:00
【问题描述】：

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

谢谢

【问题讨论】：

标签： animation width javafx-8 rectangles

【解决方案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

【讨论】：