How to make JavaFX gradually changing effect on a Image - javafx-8

Question

In my JavaFX application I have a ImageView on the stage. I wanted to add both effects Glow and Sepia, and both should be gradually increasing (0 to 1) within duration 5 sec.
How do I do this with code?
Both effects should be applied in parallel. Would it make the animation slower?

Answer 1

Use a Timeline with one KeyFrame at the start and one at the end. For each KeyFrame just set the value of each effect:
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO,
new KeyValue(glow.levelProperty(), 0),
new KeyValue(sepia.levelProperty(), 0)),
new KeyFrame(Duration.seconds(5),
new KeyValue(glow.levelProperty(), 1),
new KeyValue(sepia.levelProperty(),1))
);
SSCCE:
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.Glow;
import javafx.scene.effect.SepiaTone;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.util.Duration;
public class AnimatedEffects extends Application {
private static final String IMAGE_URL = "http://www.nasa.gov/sites/default/files/styles/full_width/public/thumbnails/image/nh-charon-neutral-bright-release.jpg?itok=20aE3TAH";
#Override
public void start(Stage primaryStage) {
ImageView image = new ImageView(new Image(IMAGE_URL, 400, 400, true, true));
Glow glow = new Glow(0);
SepiaTone sepia = new SepiaTone(0);
sepia.setInput(glow);
image.setEffect(sepia);
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO,
new KeyValue(glow.levelProperty(), 0),
new KeyValue(sepia.levelProperty(), 0)),
new KeyFrame(Duration.seconds(5),
new KeyValue(glow.levelProperty(), 1),
new KeyValue(sepia.levelProperty(),1))
);
Button effectButton = new Button("Add effect");
effectButton.setOnAction(e -> timeline.play());
BorderPane root = new BorderPane(image, null, null, effectButton, null);
BorderPane.setAlignment(effectButton, Pos.CENTER);
BorderPane.setMargin(effectButton, new Insets(10));
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}