javafx: Gradually add shapes in scene - javafx

Question

I have the following code and I am trying to add two more hexagons gradually in the scene(after 1 second each one) when I click the first hexagon. I have tried the Thread.sleep(1000) but the hexagons appear at the same time(when the code is complete).
Can you help me?
Thank you in advanced!
import java.io.IOException;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.Event;
import javafx.scene.Cursor;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
public class Hexagons extends Application {
Group root;
Scene scene1;
Polygon polygon;
Polygon polygon2;
Polygon polygon3;
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws IOException {
root = new Group();
scene1 = new Scene(root, 1000, 1000);
scene1.setCursor(Cursor.HAND);
polygon = new Polygon();
polygon.setLayoutY(50);
polygon2 = new Polygon();
polygon2.setLayoutY(50);
polygon3 = new Polygon();
polygon3.setLayoutY(50);
polygon.setFill(Color.TRANSPARENT);
polygon.setStroke(Color.BLUE);
polygon2.setFill(Color.TRANSPARENT);
polygon2.setStroke(Color.BLUE);
polygon3.setFill(Color.TRANSPARENT);
polygon3.setStroke(Color.BLUE);
root.getChildren().add(polygon);
Double[] polygonElements;
Double[] polygon2Elements;
Double[] polygon3Elements;
polygonElements = new Double[]{
100.0, 100.0,
50.0, 75.0,
50.0, 25.0,
100.0, 0.0,
150.0, 25.0,
150.0, 75.0};
polygon2Elements = new Double[]{
110.0, 100.0,
60.0, 65.0,
60.0, 15.0,
110.0, -10.0,
160.0, 15.0,
160.0, 65.0};
polygon3Elements = new Double[]{
120.0, 100.0,
70.0, 65.0,
70.0, 15.0,
120.0, -10.0,
170.0, 15.0,
170.0, 65.0};
polygon.getPoints().addAll(polygonElements);
polygon2.getPoints().addAll(polygon2Elements);
polygon3.getPoints().addAll(polygon3Elements);
polygon.setOnMouseClicked((Event event) -> {
root.getChildren().add(polygon2);
root.getChildren().add(polygon3);
});
primaryStage.setScene(scene1);
primaryStage.show();
}

Answer 1

Use a Transition like this:
package com.isp.stackoverflow;
import java.io.IOException;
import javafx.animation.FadeTransition;
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.event.Event;
import javafx.scene.Cursor;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Hexagons extends Application
{
public static void main( String[] args )
{
launch( args );
}
#Override public void start( Stage primaryStage ) throws IOException
{
final Group root = new Group();
final ObservableList<Node> rootChildren = root.getChildren();
final Scene scene = new Scene( root, 1000, 1000 );
scene.setCursor( Cursor.HAND );
final Polygon polygon = createPolygon(100.0, 100.0, 50.0, 75.0, 50.0, 25.0, 100.0, 0.0, 150.0, 25.0, 150.0, 75.0);
rootChildren.add( polygon );
polygon.setOnMouseClicked( ( Event event ) -> {
final Polygon polygon2 = createPolygon( 110.0, 100.0, 60.0, 65.0, 60.0, 15.0, 110.0, -10.0, 160.0, 15.0, 160.0, 65.0 );
final Polygon polygon3 = createPolygon( 120.0, 100.0, 70.0, 65.0, 70.0, 15.0, 120.0, -10.0, 170.0, 15.0, 170.0, 65.0 );
//remove all except first polygon
rootChildren.retainAll( polygon );
rootChildren.add( polygon2 );
rootChildren.add( polygon3 );
fadeIn( polygon2 );
fadeIn( polygon3 );
} );
primaryStage.setScene( scene );
primaryStage.show();
}
private static void fadeIn( final Node node )
{
final FadeTransition fade = new FadeTransition( Duration.millis( 200 ) );
fade.setNode( node );
fade.setFromValue( 0.0 );
fade.setToValue( 1.0 );
fade.play();
}
private static Polygon createPolygon( double... points )
{
final Polygon polygon = new Polygon( points );
polygon.setLayoutY( 50 );
polygon.setFill( Color.TRANSPARENT );
polygon.setStroke( Color.BLUE );
return polygon;
}
}