java fx使用淡入淡出和时间轴过渡 [英] java fx using fade and timeline transition

问题描述

我想用淡入淡出和时间线过渡制作图像幻灯片，所以当我按下按钮时，一个图像消失（通过淡入淡出动画）而另一个将出现（通过淡入淡出和时间线过渡）。现在我有一个代码像这只会使第一张图像消失，然后只有时间线才有效......（我使用平行过渡，我也试过顺序，但它不起作用）。

i want to make image slide show with fade and timeline transitions, so when i press the button one image dissapear(by fade animation) and another will be appearing(by fade and timeline transition).For now i have a code like this which makes only first image dissapearing and then only timeline works...(im using parallel transition, i also tried sequential but it doesn't work) .

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


        }
    });
}



}

推荐答案

我只想使用一个时间轴。例如，对于250毫秒淡入，250毫秒淡出和每秒新图像，您需要以下 KeyFrame s：

I would just use a single Timeline for this. For example, for a 250ms fade in, 250ms fade out, and a new image every second, you want the following KeyFrames:

• 时间0：不透明度0.0


• 时间0.25秒：不透明度1.0


• 时间0.75秒：不透明度1.0


• 时间1.0秒不透明度0.0并加载新图像。

• Time 0: Opacity 0.0
• Time 0.25 seconds: Opacity 1.0
• Time 0.75 seconds: Opacity 1.0
• Time 1.0 seconds Opacity 0.0 and load new image.

你可以这样做

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

这篇关于java fx使用淡入淡出和时间轴过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！