JavaFX Using TimeLine to Pause Program

Question

I need to set my background colour of my Pane for one second and then switch it to transparent. I have this set up to change the background colour, use a TimeLine with a duration of 1000ms to pause it, and then switch to transparent.

The Timeline is not pausing and the program is flying past it and setting the background to transparent too quickly. Anyone know how to fix this?

I can not use thread.sleep or anything like that because of the scope of this project.

package assign3;

import java.util.ArrayList;
import java.util.concurrent.TimeUnit;

import javafx.animation.FillTransition;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Question2 extends Application
{

    public static final int RED = 1;
    public static final int GREEN = 2;
    public static final int BLUE = 3;
    public static final int ORANGE = 4;

    @Override
    public void start( Stage obPrimeStage ) throws Exception
    {        
        boolean runGame = true;
        int level = 1;
        BorderPane obBorder = new BorderPane();
        HBox obPane = new HBox();
        HBox obStart = new HBox();
        Button btRed = new Button("Red");
        Button btGreen = new Button("Green");
        Button btBlue = new Button("Blue");
        Button btOrange = new Button("Orange");
        Button btStart = new Button("Start");
        Timeline pause = new Timeline();
        pause.setCycleCount(1);
        pause.getKeyFrames().add(new KeyFrame(Duration.millis(1000)));


        obStart.getChildren().add(btStart);
        obPane.getChildren().addAll(btRed, btGreen, btBlue, btOrange);
        obBorder.setCenter(obPane);
        obBorder.setBottom(obStart);
        obPane.setAlignment(Pos.CENTER);
        obStart.setAlignment(Pos.CENTER);

        Scene obScene = new Scene(obBorder, 400, 400);

        obPrimeStage.setTitle("Question 2");
        obPrimeStage.setScene(obScene);
        obPrimeStage.show();

        ArrayList<Integer> colours = new ArrayList<>();
        ArrayList<Integer> guesses = new ArrayList<>();

        btStart.setOnAction((ActionEvent start) -> {
            for(int i = 0; i <= level; i++)
            {
                int randomColour = (int)((Math.random() * 4) + 1);
                randomColour = 1;

                if(randomColour == RED)
                {
                    obBorder.setBackground(new Background(new BackgroundFill(Color.RED, CornerRadii.EMPTY, Insets.EMPTY)));
                    pause.play();
                    obBorder.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
                    colours.add(RED);
                }

Answer 1

You are using Timeline as a substitute for Thread.sleep. That is not how Timeline works.

When you call play() on an Animation, it starts the animation in the background and returns immediately.

Have a look at the constructors of the KeyFrame class . You need to pass a KeyValue to your KeyFrame, so a change occurs at the point in time represented by the KeyFrame:

pause.getKeyFrames().add(new KeyFrame(Duration.ZERO,
    new KeyValue(obBorder.backgroundProperty(),
        new Background(new BackgroundFill(Color.RED, CornerRadii.EMPTY, Insets.EMPTY)))));

pause.getKeyFrames().add(new KeyFrame(Duration.millis(1000),
    new KeyValue(obBorder.backgroundProperty(),
        new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)))));

As you can see, a KeyValue consists of two parts: a property, and the new value you want assigned to that property at some point during the animation.

• The first at Duration.ZERO (the start), which sets the background property to your starting color.
• The second occurs after 1000 milliseconds have passed, and sets the background property to transparent again.

By the way, you might find Duration.seconds(1) a little more readable.