KeyFrame and Duration in JavaFX Image Slideshow

Question

I am making a program where there is 3 images in it and it goes through a slideshow each image showing two seconds. I have the seconds different than what they should be currently. But I am having a problem with my line of code declaring the KeyFrame. I put all my code bellow. Any suggestions on what I should change with keyframe or anything else additionally in my code. This is using JavaFX.

    /*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package digitalpictureframe;

import java.io.File;
//import java.time.Duration;
import java.util.Arrays;
import javafx.util.Duration;
import java.util.Collections;
import java.util.Iterator;
import java.util.List;
import java.util.stream.Collectors;
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.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 *
 * @author Zachary Murphy
 */
public class DigitalPictureFrame extends Application {


    @Override
    public void start(Stage primaryStage) {

        Image image1 = new Image("1.png");
        Image image2 = new Image("2.png");
        Image image3 = new Image("3.png");
        ImageView imageView = new ImageView();
        Timeline timeline = new Timeline(

                new KeyFrame(Duration.ZERO, new KeyValue(imageView.imageProperty(), image1)),
            new KeyFrame(Duration.seconds(1), new KeyValue(imageView.imageProperty(), image2)),  
            new KeyFrame(Duration.seconds(2), new KeyValue(imageView.imageProperty(), image3)),
            new KeyFrame(Duration.seconds(4), new KeyValue(imageView.imageProperty(), null))
            );
        timeline.play();
        StackPane root = new StackPane();
        root.getChildren().add(imageView);
        primaryStage.setScene(new Scene(root, 800, 600));
        primaryStage.show();
    }

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

Answer 1

The following code is for the image slideshow. It loops through 25 images and pause with click and start again with another click. I also used the Fade Animation between images. Each image will stay for 2 seconds.

import javafx.animation.Animation;
import javafx.animation.FadeTransition;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class lab12 extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    // Global ImageView array variable.
    ImageView[] imgView = new ImageView[25];
    int imgIndex = 0;

    public void start(Stage stage) {

        Pane pane = new Pane();

        for (int i = 0; i < 25; i++) {
            imgView[i] = new ImageView(new Image("imagescards/" + i + ".jpg"));
            imgView[i].setFitWidth(600);
            imgView[i].setFitHeight(600);

        }

        pane.getChildren().add(imgView[imgIndex]);

        EventHandler<ActionEvent> eventHandler = e -> {
            if (imgIndex < 24) {
                // Adding Children
                pane.getChildren().remove(imgView[imgIndex]);
                imgIndex++;
                pane.getChildren().add(imgView[imgIndex]);
                FadeTransition ft = new FadeTransition(Duration.millis(1000), imgView[imgIndex]);
                ft.setFromValue(0);
                ft.setToValue(1);
                ft.play();
            }
            else if (imgIndex == 24) {
                imgIndex = 0;
                pane.getChildren().remove(imgView[24]);
                pane.getChildren().add(imgView[imgIndex]);
                FadeTransition ft = new FadeTransition(Duration.millis(1000), imgView[imgIndex]);
                ft.setFromValue(0);
                ft.setToValue(1);
                ft.play();
            }
        };

        // Timeline Animation
        Timeline animation = new Timeline(new KeyFrame(Duration.millis(3000), eventHandler));

        animation.setCycleCount(Timeline.INDEFINITE);
        animation.play();

        pane.setOnMouseClicked(e -> {
            if (animation.getStatus() == Animation.Status.PAUSED) {
                animation.play();
            } else {
                animation.pause();
            }
        });

        Scene scene = new Scene(pane, 600, 600);

        stage.setScene(scene);
        stage.setTitle("Slide Show");
        stage.show();
    }
}