我想用淡入淡出和时间轴过渡来制作图像幻灯片,所以当我按下按钮时,一个图像消失(通过淡入淡出动画),另一个图像将出现(通过淡入淡出和时间轴过渡)。现在我有一个类似的代码这只会使第一个图像消失,然后只有时间轴起作用...(我使用并行过渡,我也尝试过顺序过渡,但它不起作用)。
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();
}
});
}
}
最佳答案
我只会使用一个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();
关于java fx 使用淡入淡出和时间轴过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31798493/