在幻灯片中一张一张显示随机图像的时间线

Question

我想一张一张地随机显示我的图像。仅当我将持续时间以秒为单位时，下面的代码才会一张一张地显示图像：

 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)),

所以，我的代码将显示 image1 firstn image 2 second, image3thirds 等等。

1) 我希望它每次都显示随机图像。
2）不依赖于持续时间。因为如果我将Duration.seconds(3) 放在所有这些上，它将只显示第一个。

代码如下：

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);
    }
}

Answer 1

这是一个基于数组的解决方案，可以循环显示随机选择的图像。数组中的所有图像都会以随机顺序显示一次，然后数组将被打乱，允许所有图像以不同的随机顺序再次显示。

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"
    };
}

因为我们每次都洗牌，所以有可能最后一个显示的图像被洗牌成为下一个循环的第一张图像（连续显示两次）。如果您不希望在循环之间更改顺序，只需删除播放时间完成时执行的 shuffle 命令即可。

注意，为简单起见，代码使用impl_getUrl() 将显示的图像 url 的日志输出到控制台 - 不建议在生产代码中使用 impl 方法。

Answer 2

在您的堆栈窗格中，它说在三秒钟的时间内显示所有四个图像，您需要它们一张一张地显示。 改变

 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))
            );