java fx 使用淡入淡出和时间轴过渡

Question

我想用淡入淡出和时间轴过渡来制作图像幻灯片，所以当我按下按钮时，一个图像消失(通过淡入淡出动画)，另一个图像将出现(通过淡入淡出和时间轴过渡)。现在我有一个类似的代码这只会使第一个图像消失，然后只有时间轴起作用...(我使用并行过渡，我也尝试过顺序过渡，但它不起作用)。

public class MainPaneController implements Initializable {

@FXML
private BorderPane borderPane;

@FXML
private MenuBar menuBar;

@FXML
private AnchorPane anchorPaneTop;

@FXML
private HBox hBox;

@FXML
private MenuItem openFolder;

@FXML
private AnchorPane anchorPaneCenter;

@FXML
private ImageView imageView;

@FXML
private Button slideShowButton;

@FXML
private Menu menu;

private Image image;

private ImageParser parser;

private ObservableList<Image> imagesList;
private int indexPrev = 0;
private int indexNext = 0;
private Timeline timeline;
private AnimationTimer timer;
int i = 0;

@Override
public void initialize(URL location, ResourceBundle resources)
        throws IndexOutOfBoundsException {
    parser = new ImageParser();
    imagesList = FXCollections.observableArrayList();
    DirectoryChooser dc = new DirectoryChooser();

    openFolder.setOnAction(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            File dir = dc.showDialog(new Stage());
            imagesList = parser.createImagesListFromFileList(dir);
            imageView.setImage(imagesList.get(0));

        }
    });
    slideShowButton.setOnAction(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            FadeTransition ft = new FadeTransition();

            ft.setNode(imageView);
            ft.setDuration(new Duration(2000));
            ft.setFromValue(1.0);
            ft.setToValue(0.0);
            ft.setCycleCount(imagesList.size());
            ft.setAutoReverse(true);

            imageView.setImage(imagesList.get(0));

            timeline = new Timeline();
            timeline.setCycleCount(Timeline.INDEFINITE);
            timeline.setAutoReverse(true);

            KeyFrame key = new KeyFrame(Duration.seconds(1),
                    new EventHandler<ActionEvent>() {

                        @Override
                        public void handle(ActionEvent event) {

                            if (i < imagesList.size()) {
                                imageView.setImage(imagesList.get(i));
                                i++;
                            }

                        }

                    });
            timeline.getKeyFrames().add(key);

            ParallelTransition parallelTransition = new ParallelTransition();
            parallelTransition.getChildren().addAll(
                    ft,
                   timeline
            );
            parallelTransition.setCycleCount(Timeline.INDEFINITE);
            parallelTransition.play();


        }
    });
}



}

Answer 1

我只会使用一个Timeline来实现这一点。例如，对于 250 毫秒淡入、250 毫秒淡出以及每秒一个新图像，您需要以下 KeyFrame:

• 时间 0:不透明度 0.0
• 时间 0.25 秒:不透明度 1.0
• 时间 0.75 秒:不透明度 1.0
• 时间 1.0 秒，不透明度 0.0 并加载新图像。

你可以这样做

timeline = new Timeline();

KeyValue transparent = new KeyValue(imageView.opacityProperty(), 0.0);
KeyValue opaque = new KeyValue(imageView.opacityProperty(), 1.0);

KeyFrame startFadeIn = new KeyFrame(Duration.ZERO, transparent);
KeyFrame endFadeIn = new KeyFrame(Duration.millis(250), opaque);
KeyFrame startFadeOut = new KeyFrame(Duration.millis(750), opaque);
KeyFrame endFadeOut = new KeyFrame(Duration.millis(1000), e -> {
    if (i < images.size()) {
        imageView.setImage(images.get(i));
        i++ ;
    }
}, transparent);

timeline.getKeyFrames().addAll(startFadeIn, endFadeIn, startFadeOut, endFadeOut);

timeline.setCycleCount(Animation.INDEFINITE);
timeline.play();