Interesting things, however, strangers? StackPane, animations and filters.

CHANGE (17/01/2014):

As suggested by jsmith , I changed this thread so we could treat the on only one thing. Other issues that existed here before I put each in its own separate discussion. I hope that now we can deal with it properly, so start New:

For the first test case, I tried to create a program that has some controls and I put a animated background behind her done with nodes in transition. With such a test, I received the following Visual result:

http://s24.postimg.org/tk0psfm2t/programa_errado.jpg

The background is made of white circles que increase and decrease more than time asynchronously. Notice how the interface (controls) is put on the top, and Unfortunately, it is not aligned for what is of the application window. Tthere resulting code from the image above can be seen below:

import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Duration;

public class AnimatedBackground extends Application
{
    // #########################################################################################################
    //                                                                                                      MAIN
    // #########################################################################################################
   
    public static void main(String[] args)
    {
        Application.launch(args);
    }

    // #########################################################################################################
    //                                                                                                INSTANCES
    // #########################################################################################################
   
    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 but_test;
   
    // #########################################################################################################
    //                                                                                                 FX INIT
    // #########################################################################################################
   
    @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 asynchronously.
        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 timeL = new Timeline();
            timeL.getKeyFrames().add(kFrame);
            timeL.setAutoReverse(true);
            timeL.setCycleCount(Animation.INDEFINITE);
            timeL.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.but_test = new Button("CHANGE POSITIONS");
        this.but_test.setAlignment(Pos.CENTER);
       
// Change circles position when button is pressed.
        this.but_test.setOnAction(new EventHandler<ActionEvent>()
        {
            @Override public void handle(ActionEvent e)
            {
                for(Node hexagon : grp_hexagons.getChildren())
                {
                    hexagon.setTranslateX(Math.random() * cenario.getWidth());
                    hexagon.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.but_test);
       
        this.root.getChildren().add(this.lay_box_controls);
    }
}

I think that my tree of nodes is structured as follows :

http://S27.postimg.org/pjpvnlywz/rvore_de_n_s.jpg

I also have tried to change the root of my scene graph to StackPane. Unfortunately, the result was weird. Despite my interface controls went to the middle of the window (which is what I wanted), the bottom began to to animate in a totally weird way. I don't know what else to do on this subject. , It would be strange If this type of feature is not exist in JavaFX, because I could easily do this kind of thing to the Swing Framework library and timming. So far, I still can't understand how I could get around this problem. As a user of JavaFX, I think that it would be more interesting if the JavaFX developers would put more cool similar things to present in the documentation us. Well... If someone can help me Iwill be really grateful. I don't know a lot of people peut Can also take advantage of this too.

Thank you for your attention and patience in any case.

Editada por Mensagem: Loa

It seems to me that I finally got the result I wanted, thanks to God and to you for this. I'd love to share with the community here:

Using StackPane as root, it seemed to me that I was not getting the desired result. As you say, make use of the group for circles, causes odd effect I spoke. That's because you showed me in the JavaFX API, group is committed to the size of its child nodes. As in this type of animation background changes its size in transition (and because it's in a layout that centralizes things like StackPane), it seems that the circles are not calm and move every time they becoming or shrinkage. Using StackPane as one parent node to the circles, they are all mainly in the center of the Panel, as it is one of the goals of StackPane. As I intend to change their positions, I used the following code block so that it is possible (in the case where triggered when the button is clicked):

circle.setTranslateX(Math.random() * cenario.getWidth());
circle.setTranslateY(Math.random() * cenario.getHeight());

He was supposed to distribute the circles in the background of the window. However, it was not quite what happened. This that this resulted in circles in the background OF THE CENTER OF THE BACKGROUND, not distributing from the upper left, as initially planned by me. This means that the starting position in the center of a StackPane node leaves, that is to say StackPane not only centralizes things, but also change the initial position of them. For the circles to be distributed properly, I had to take into account the negative positions, since their origin was like being in the Center. With that, I could find the following code:

circle.setTranslateX( random.nextInt((int) cenario.getWidth()) - cenario.getWidth() / 2 );
circle.setTranslateY( random.nextInt((int) cenario.getHeight()) - cenario.getHeight() / 2 );

All this race about ended up giving me the tree of the following nodes:

http://S14.postimg.org/y887ps3zz/finalnodes.jpg

And also the following final code:

import java.util.Random;

import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Duration;

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

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

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

    private StackPane root;
    private StackPane circles;
    private Rectangle rect_background;
    private Scene cenario;

    // UI

    private VBox lay_box_controls;

    private Label lab_test;
    private TextArea texA_test;
    private Button but_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 StackPane();

        this.circles = new StackPane();
        this.circles.setStyle("-fx-border-color:blue");

        // 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.circles.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 timeL = new Timeline();
            timeL.getKeyFrames().add(kFrame);
            timeL.setAutoReverse(true);
            timeL.setCycleCount(Animation.INDEFINITE);
            timeL.play();
        }

        this.rect_background = new Rectangle();

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

        // UI

        this.lay_box_controls = new VBox();
        this.lay_box_controls.setSpacing(20);
        this.lay_box_controls.setAlignment(Pos.CENTER);
        this.lay_box_controls.setPadding(new Insets(0 , 90 , 0 , 90));

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

        // Pressing the button, the circles will change to random positions.
        this.but_test.setOnAction(new EventHandler()
        {
            @Override public void handle(ActionEvent e)
            {
                Random random = new Random();

                for(Node circle : circles.getChildren())
                {
                    // The layout behaves in a very unexpected way.
                    circle.setTranslateX( random.nextInt((int) cenario.getWidth()) - cenario.getWidth() / 2 );
                    circle.setTranslateY( random.nextInt((int) cenario.getHeight()) - cenario.getHeight() / 2 );
                }
            }
        });

        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.but_test);

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

The only little problem that 'left' now is when the user resizes the application. Once that circles are distributed whenever the application is resized they need be distributed again. My test application doesn't have with that in mind, but I think I can solve this problem easily using a layout that arranges the nodes by the edges of a panel using a proportional positioning. For example, should be a sign of provision for organizing nodes always a certain percentage of the edges. This can be done easily with a layout of the custom panel, because AnchorPane behaves in a different way.

I think that what I have to do now is go back and learn how to create a custom layout Panel. I want to thank all of you for your patience and your good intention to help. Thank you, really!

If anyone has anything to add, or corrections to what I said earlier, I would be very happy. The richest is this thread, best JavaFX is accepted for other users.

Tags: Java

Interesting things, however, strangers? StackPane, animations and filters.

Similar Questions

Maybe you are looking for