Fade между изображениями в JavaFX

Question

У меня есть ImageView, в котором я хочу отображать два изображения один за другим. Я хочу, чтобы переход между этими двумя изображениями имел эффект затухания. Это то, что я пробовал:

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); 
timelineOn.setAutoReverse(false); 
timelineOn.play(); 

Но переход между изображениями является твердым, без замирания. Что я делаю неправильно?

Answer 1

Так что я должен был сделать просто создать еще один ImageView, а затем изменить непрозрачность одного из представлений изображений. Вот 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="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <ImageView fx:id="imageView" fitHeight="195.0" fitWidth="195.0" 
       pickOnBounds="true" preserveRatio="true"> 
     <Image url="@../img/drag_drop.png"/> 
    </ImageView> 
    <ImageView fx:id="imageViewHover" fitHeight="195.0" fitWidth="195.0" 
       pickOnBounds="true" preserveRatio="true"> 
     <Image url="@../img/drag_drop_hover.png"/> 
    </ImageView> 
</AnchorPane> 

А вот код:

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); 
     timelineOn.setCycleCount(Timeline.INDEFINITE); 

Что она делает это, чтобы создать «моргнуть» эффект между двумя ImageView с.

Answer 2

Интерполятор действительно ничего не делает для вас здесь (он просто определяет сопоставление между фактическим временем и параметром, используемым для вычисления значений изменяющихся свойств).

Для того, чтобы внедрить в/в выцветание, необходимо на самом деле манипулировать opacityPropertyimageView в Timeline.

Try что-то вроде

KeyFrame keyFrame1On = new KeyFrame(Duration.seconds(0), new KeyValue(imageView.imageProperty(), image1)); 
KeyFrame startFadeOut = new KeyFrame(Duration.seconds(0.2), new KeyValue(imageView.opacityProperty(), 1.0)); 
KeyFrame endFadeOut = new KeyFrame(Duration.seconds(0.5), new KeyValue(imageView.opacityProperty(), 0.0)); 
KeyFrame keyFrame2On = new KeyFrame(Duration.seconds(0.5), new KeyValue(imageView.imageProperty(), image2)); 
KeyFrame endFadeIn = new KeyFrame(Duration.seconds(0.8), new KeyValue(imageView.opacityProperty(), 1.0)); 
Timeline timelineOn = new Timeline(keyFrame1On, startFadeOut, endFadeOut, keyFrame2On, endFadeIn);