Mateus Viccari Mateus Viccari - 1 year ago 138
Java Question

Fade between images in JavaFX

i have an ImageView that i want to display two images, one after another. And i want the transition betwewn these two images to have a fade effect.
So, i tried this:

KeyFrame keyFrame1On = new KeyFrame(Duration.seconds(.2), new KeyValue(imageView.imageProperty(), image1, Interpolator.EASE_OUT));
KeyFrame keyFrame2On = new KeyFrame(Duration.seconds(.5), new KeyValue(imageView.imageProperty(), image2, Interpolator.EASE_OUT));
Timeline timelineOn = new Timeline(keyFrame1On, keyFrame2On);

But the transition between the images is solid, without fade.
What am i doing wrong?

Answer Source

So what I had to do was just create another ImageView, then change the opacity of one of the image views. Here is the FXML:

<AnchorPane fx:controller="br.atualy.importacaocte.controllers.DragAndDropController" maxHeight="-Infinity"
            maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="195.0" prefWidth="195.0"
            style="-fx-background-color: transparent"
            xmlns="" xmlns:fx="">
    <ImageView fx:id="imageView" fitHeight="195.0" fitWidth="195.0"
               pickOnBounds="true" preserveRatio="true">
        <Image url="@../img/drag_drop.png"/>
    <ImageView fx:id="imageViewHover" fitHeight="195.0" fitWidth="195.0"
               pickOnBounds="true" preserveRatio="true">
        <Image url="@../img/drag_drop_hover.png"/>

And here is the code:

KeyFrame kf1 = new KeyFrame(Duration.seconds(0), new KeyValue(imageViewHover.opacityProperty(), 0));
        KeyFrame kf2 = new KeyFrame(Duration.seconds(.5), new KeyValue(imageViewHover.opacityProperty(), 1));
        KeyFrame kf3 = new KeyFrame(Duration.seconds(1.5), new KeyValue(imageViewHover.opacityProperty(), 1));
        KeyFrame kf4 = new KeyFrame(Duration.seconds(2), new KeyValue(imageViewHover.opacityProperty(), 0));
        Timeline timelineOn = new Timeline(kf1, kf2, kf3, kf4);

What it does is to create a "blink" effect between the two ImageViews.