Timeline to Display Random images one by one in a slideshow

问题

I want to display my images randomly one by one. The code below displays images one by one only if i put the duration time in seconds like:

 new KeyFrame(Duration.seconds(1), new KeyValue(imageView.imageProperty(), image1)),
 new KeyFrame(Duration.seconds(2), new KeyValue(imageView.imageProperty(), image2)),
 new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image3)),
 new KeyFrame(Duration.seconds(4), new KeyValue(imageView.imageProperty(), image4)),

So, my code will display image1 firstn image 2 second, image3 thirds and so on.

1) I want it to display random images every time.
2) Not to depend on duration time . Because if i put Duration.seconds(3) to all of them it will display just the first one.

Code looks like this:

package imagedisplayy;

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
 *
 * @author D
 */
public class ImageDisplayy extends Application {

    @Override
    public void start(Stage primaryStage) {
        Image image1 = new Image("file:lib/1.jpg");
        Image image2 = new Image("file:lib/2.jpg");
        Image image3 = new Image("file:lib/3.jpg");
        Image image4 = new Image("file:lib/4.jpg");
        ImageView imageView = new ImageView();
        Timeline timeline = new Timeline(

                new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image1)),
                new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image2)),  
                new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image3)),
                new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image4)),   
                new KeyFrame(Duration.seconds(3), 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);
    }
}

回答1:

Here is an array based solution that cycles displaying a random choice of images. All images in the array will be displayed once in random order, then the array will be shuffled, allowing all images to be displayed again in a different random order.

import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;

import java.util.*;
import java.util.stream.Collectors;

public class ImageDisplay extends Application {

    private List<Image> images;
    private Iterator<Image> imageIterator;

    @Override
    public void start(Stage stage) {
        images = Arrays.stream(IMAGE_LOCS)
                .map(Image::new)
                .collect(Collectors.toList());
        Collections.shuffle(images);
        imageIterator = images.iterator();
        ImageView imageView = new ImageView();

        Timeline timeline = new Timeline(
                new KeyFrame(
                        Duration.ZERO,
                        e -> {
                            imageView.setImage(imageIterator.next());
                            System.out.println(
                                 "Displaying " + imageView.getImage().impl_getUrl()
                            );
                        }
                ),
                new KeyFrame(Duration.seconds(1))
        );
        timeline.setCycleCount(images.size());
        timeline.setOnFinished(event -> {
            Collections.shuffle(images);
            imageIterator = images.iterator();
            timeline.playFromStart();
        });
        timeline.play();

        StackPane layout = new StackPane(imageView);
        stage.setScene(new Scene(layout));
        stage.show();
    }

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

    // image license: linkware - backlink to http://www.fasticon.com
    private static final String[] IMAGE_LOCS = {
        "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Blue-Fish-icon.png",
        "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Red-Fish-icon.png",
        "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Yellow-Fish-icon.png",
        "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Green-Fish-icon.png"
    };
}

Because we shuffle each time, it is possible for the last image displayed to be shuffled to be the first image on the next cycle (displaying it twice in a row). If you don't want the order to change between cycles, just remove the shuffle command executed when the time completes playing.

Note, for simplicity, the code uses impl_getUrl() to output a log of displayed image urls to the console - use of impl methods is not recommended in production code.

回答2:

In your stack pane it says for a duration of three seconds show all four images, you need them to show one by one. Change

 new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image1)),
            new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image2)),  
            new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image3)),
            new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), image4)),   
            new KeyFrame(Duration.seconds(3), new KeyValue(imageView.imageProperty(), null))
            );

     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(3), new KeyValue(imageView.imageProperty(), image4)),   
            new KeyFrame(Duration.seconds(4), new KeyValue(imageView.imageProperty(), null))
            );

来源：https://stackoverflow.com/questions/35869192/timeline-to-display-random-images-one-by-one-in-a-slideshow

标签

java

javafx