1

I am building a javaFX application.

The example program which is online working well: http://www.java2s.com/Tutorials/Java/JavaFX/1010__JavaFX_Timeline_Animation.htm

I changed it a bit:

I want to have these nice moving circles in the background. That's why I made these tricks:

Main.java:

@Override
public void start(Stage primaryStage) {
    try {
        // load the FXML resource
        FXMLLoader loader = new FXMLLoader(getClass().getResource("Dashboard.fxml"));

        // store the root element so that the controllers can use it
        StackPane root = new StackPane();
        Pane bgRoot = new Pane();
        GridPane userRoot = (GridPane) loader.load();           


        // create and style a scene
        Rectangle2D primaryScreenBounds = Screen.getPrimary().getBounds();
        BackgroundScene bgScene = new BackgroundScene(root, bgRoot, primaryScreenBounds.getWidth(),
                primaryScreenBounds.getHeight(), Color.BLACK);

        // TODO CSS load:
        // bgScene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

        // create the stage with the given title and the previously created
        // scene
        primaryStage.setFullScreen(true);
        primaryStage.setMaximized(true);
        primaryStage.setResizable(false);
        primaryStage.setMinWidth(primaryScreenBounds.getWidth());
        primaryStage.setMinHeight(primaryScreenBounds.getHeight());
        primaryStage.setScene(bgScene);

        root.getChildren().add(bgRoot);
        root.getChildren().add(userRoot);

        // show the GUI
        primaryStage.show();

        userRoot.setPrefHeight(root.getHeight());
        userRoot.setPrefWidth(root.getWidth());

    } catch (Exception e) {
        e.printStackTrace();
    }
}

In the above code:

  • I have a stage with a stack pane.
  • There is a Pane on the StackPane with the Circles
  • On that there is a GridPane for controllers.

I made my own Scene as BackgroundScene:

public class BackgroundScene extends Scene {

private Pane bgRoot;

public BackgroundScene(Parent root, Pane bgRoot, double width, double height, Color color) {
    super(root, width, height, color);
    this.bgRoot = bgRoot;
    makeGreenCircleAnimation();
}

public void makeGreenCircleAnimation() {
    Group circles = new Group();
    for (int i = 0; i < 30; i++) {
        Circle circle = new Circle(Math.random() * this.getWidth(), Math.random() * this.getHeight(),
                150, Color.web("white", 0.05));
        circle.setStrokeType(StrokeType.OUTSIDE);
        circle.setStroke(Color.web("white", 0.16));
        circle.setStrokeWidth(4);
        circles.getChildren().add(circle);
    }
    circles.setEffect(new BoxBlur(10, 10, 3));

    Rectangle colors = new Rectangle(this.getWidth(), this.getHeight(),
            new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE,
                    new Stop[] { new Stop(0, Color.web("#00ff00")), new Stop(0.14, Color.web("#11ee11")),
                            new Stop(0.28, Color.web("#22dd22")), new Stop(0.43, Color.web("#33cc33")),
                            new Stop(0.57, Color.web("#44bb44")), new Stop(0.71, Color.web("#55aa55")),
                            new Stop(0.85, Color.web("#669966")), new Stop(1, Color.web("#778877")), }));

    Group blendModeGroup = new Group(
            new Group(new Rectangle(this.getWidth(), this.getHeight(), Color.DARKGREEN), circles), colors);
    colors.setBlendMode(BlendMode.OVERLAY);
    bgRoot.getChildren().add(blendModeGroup);

    Timeline timeline = new Timeline();
    makeAnimation(circles, timeline);

    timeline.play();
    timeline.setOnFinished(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            makeAnimation(circles, timeline);
            timeline.play();
        }
    });
}

void makeAnimation(Group group, Timeline timeline) {
    timeline.getKeyFrames().clear();
    for (Node node : group.getChildren()) {
        timeline.getKeyFrames()
                .addAll(new KeyFrame(Duration.ZERO, // set start
                                                    // position at 0
                        new KeyValue(node.translateXProperty(), node.getLayoutX() + node.getTranslateX()),
                        new KeyValue(node.translateYProperty(), node.getLayoutY() + node.getTranslateY())),
                new KeyFrame(new Duration(4000), // set end position at
                                                    // 40s
                        new KeyValue(node.translateXProperty(), Math.random() * this.getWidth()),
                        new KeyValue(node.translateYProperty(), Math.random() * this.getHeight())));
    }
}

}

  • It contains the code from the tutorial (with minor changes).
  • I add the circles and everything to the Pane not to a Group (as in the online example)

The problem is that it is seams to be moving:

The circles are moving to the right (always)

enter image description here

If I change something in the code:

Main.java (instantiating my scene):

BackgroundScene bgScene = new BackgroundScene(root, root, primaryScreenBounds.getWidth(),
                primaryScreenBounds.getHeight(), Color.BLACK);

(so giving the circles to the StackPane)

This happens:

enter image description here

You can download the eclipse project: https://www.dropbox.com/s/dovae0hxdtsnsdo/Test.7z?dl=0

Do you know what is the problem?

Or can you suggest something how I can put the circles nicely behind the button?

Tomi
  • 3,370
  • 1
  • 16
  • 26
  • Possible duplicate of http://stackoverflow.com/questions/28835920/when-to-use-translate-and-when-relocate-what-is-the-difference-between-transla – hotzst Nov 05 '15 at 17:42

0 Answers0