JavaFX 2.X - 动画背景和动画控件答案

【问题标题】：JavaFX 2.X - Animated background and animated controlsJavaFX 2.X - 动画背景和动画控件
【发布时间】：2014-01-13 02:53:22
【问题描述】：

几天前，我开始学习 JavaFX，并产生了进行 2 次实验的愿望。首先，我想知道是否可以在用户界面后面放置动画背景。我已经成功地创建了一个动画背景，但现在我很难在界面中间放置一些控件。

我想向您介绍我的程序的 2 张图片。第一个演示了我得到的不良结果：

我相信这是我的节点树：

这是我的应用程序的代码：

public class AnimatedBackground extends Application
{
// #########################################################################################################
//                                                                                                      MAIN
// #########################################################################################################

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

// #########################################################################################################
//                                                                                                INSTÂNCIAS
// #########################################################################################################

private Group root;
private Group grp_hexagons;
private Rectangle rect_background;
private Scene cenario;

// UI

private VBox lay_box_controls;

private Label lab_test;
private TextArea texA_test;
private Button bot_test;

// #########################################################################################################
//                                                                                                 INÍCIO FX
// #########################################################################################################

@Override public void start(Stage stage) throws Exception 
{
    this.confFX();

    cenario = new Scene(this.root , 640 , 480);

    this.rect_background.widthProperty().bind(this.cenario.widthProperty());
    this.rect_background.heightProperty().bind(this.cenario.heightProperty());

    stage.setScene(cenario);
    stage.setTitle("Meu programa JavaFX - R.D.S.");
    stage.show();
}

protected void confFX()
{
    this.root = new Group();
    this.grp_hexagons = new Group();

    // Initiate the circles and all animation stuff.
    for(int cont = 0 ; cont < 15 ; cont++)
    {
        Circle circle = new Circle();
        circle.setFill(Color.WHITE);
        circle.setEffect(new GaussianBlur(Math.random() * 8 + 2));
        circle.setOpacity(Math.random());
        circle.setRadius(20);

        this.grp_hexagons.getChildren().add(circle);

        double randScale = (Math.random() * 4) + 1;

        KeyValue kValueX = new KeyValue(circle.scaleXProperty() , randScale);
        KeyValue kValueY = new KeyValue(circle.scaleYProperty() , randScale);
        KeyFrame kFrame = new KeyFrame(Duration.millis(5000 + (Math.random() * 5000)) , kValueX , kValueY);

        Timeline linhaT = new Timeline();
        linhaT.getKeyFrames().add(kFrame);
        linhaT.setAutoReverse(true);
        linhaT.setCycleCount(Animation.INDEFINITE);
        linhaT.play();
    }

    this.rect_background = new Rectangle();

    this.root.getChildren().add(this.rect_background);
    this.root.getChildren().add(this.grp_hexagons);

    // UI

    this.lay_box_controls = new VBox();
    this.lay_box_controls.setSpacing(20);
    this.lay_box_controls.setAlignment(Pos.CENTER);

    this.bot_test = new Button("CHANGE POSITIONS");
    this.bot_test.setAlignment(Pos.CENTER);

    this.bot_test.setOnAction(new EventHandler<ActionEvent>() 
    {
        @Override public void handle(ActionEvent e) 
        {
            for(Node hexagono : grp_hexagons.getChildren())
            {
                hexagono.setTranslateX(Math.random() * cenario.getWidth());
                hexagono.setTranslateY(Math.random() * cenario.getHeight());
            }
        }
    });

    this.texA_test = new TextArea();
    this.texA_test.setText("This is just a test.");

    this.lab_test = new Label("This is just a label.");
    this.lab_test.setTextFill(Color.WHITE);
    this.lab_test.setFont(new Font(32));

    this.lay_box_controls.getChildren().add(this.lab_test);
    this.lay_box_controls.getChildren().add(this.texA_test);
    this.lay_box_controls.getChildren().add(this.bot_test);

    this.root.getChildren().add(this.lay_box_controls);
}
}

我尝试使用 StackPane 作为我的场景图的根，但也发现了不想要的结果。尽管控件一直停留在窗口的中心，但随着圆圈的增大和缩小，圆圈开始向内移动，看起来一切都很奇怪。

我想知道的第二件事是是否可以自定义控件，以便它们在某些事件发生时执行一些动画。尽管我们可以使用 CSS 更改控件的外观，但创建复杂的东西却更难。例如，当一个控件由于状态的改变而改变了它的外观时，过渡状态的改变不是以动画的方式进行的，而是以一种突然的、静态的方式进行的。有没有办法为它的状态之间的按钮设置动画？这将使用 JavaFX API 来完成吗？或者那会使用CSS吗？或者以任何方式都不可能？

感谢您的关注。

【问题讨论】：

标签： css animation javafx

【解决方案1】：

经过一番努力，我和 Oracle 社区的一些用户终于解决了这个问题。我认为没有必要在这里重复我们做出的所有解决方案，所以我会发布链接，以便您访问问题的解决方案。我希望这对我们所有人都有好处。无论如何感谢您的关注。

https://community.oracle.com/thread/2620500

【讨论】：