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

Question

几天前我开始研究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？或者无论如何都不可能？

感谢您的关注。

Answer 1

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

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