Timelines JavaFX

Question

How can I add a delay between keyframes? I want the user to see the front of the card for 0.6 seconds before it closes if the cards do not match. Here is the code I tried the one in the bottom but it doesn't work.

KeyFrame start = new KeyFrame(
            Duration.ZERO,
            new KeyValue(imageView.scaleXProperty(), 1.0));
    KeyFrame middle = new KeyFrame(
            Duration.millis(150),
            e -> imageView.setImage(image),
            new KeyValue(imageView.scaleXProperty(), 0.0)
    );
    KeyFrame end = new KeyFrame(
            Duration.millis(300),
            new KeyValue(imageView.scaleXProperty(), 1.0));
    new Timeline(start, middle, end).play();



KeyFrame start = new KeyFrame(
            Duration.ZERO,
            new KeyValue(imageView.scaleXProperty(), 1.0));
    KeyFrame middle = new KeyFrame(
            Duration.millis(150),
            e -> imageView.setImage(image),
            new KeyValue(imageView.scaleXProperty(), 0.0)
    );
    KeyFrame delay = new KeyFrame(
            Duration.millis(600)
    );
    KeyFrame end = new KeyFrame(
            Duration.millis(300),
            new KeyValue(imageView.scaleXProperty(), 1.0));
    new Timeline(start, middle,delay, end).play();

Answer 1

Note: The below assumes the card is "scaled in" as well as "scaled out". I'm not sure that's actually what you want considering your use of Duration.ZERO in the question. If you want the card to just pop up immediately then remove the scale-in animation; simply show the card then start the animation (where the PauseTransition is the first in the sequential setup).

---

Use SequentialTranition , PauseTransition , and ScaleTransition to your advantage. For example:

ScaleTransition start = new ScaleTransition(Duration.millis(150));
start.setToX(1.0);

// plays after 'start' finishes
PauseTransition middle = new PauseTransition(Duration.millis(600));

// plays after 'middle' finishes
ScaleTransition end = new ScaleTransition(Duration.millis(300));
end.setToX(0.0);

// only set the node on the SequentialTransition
SequentialTransition animation = new SequentialTransition(imageView, start, middle, end);

If you want the scale transitions to have the same duration then the above can be simplified to:

ScaleTransition scale = new ScaleTransition(Duration.millis(150));
scale.setFromX(0.0);
scale.setToX(1.0);

// Set to half the desired time because of the auto-reverse configured below
PauseTransition pause = new PauseTransition(Duration.millis(300));

// Plays 'scale' forwards, followed by 'pause', then plays 'pause' backwards
// followed by `scale`. That's why 'pause' has its duration set to half the full
// desired duration (it's played forwards then immediately backwards for a total
// of 600 ms).
SequentialTransition animation = new SequentialAnimation(imageView, scale, pause);
animation.setAutoReverse(true);
animation.setCycleCount(2);