package javafx_imagetransition; import javafx.animation.FadeTransition; import javafx.animation.SequentialTransition; import javafx.animation.SequentialTransitionBuilder; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.HBox; import javafx.scene.layout.StackPane; import javafx.stage.Stage; import javafx.util.Duration; /** * * @web http://java-buddy.blogspot.com/ */ public class JavaFX_ImageTransition extends Application { /** * @param args the command line arguments */ public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("http://java-buddy.blogspot.com/"); HBox hBox = new HBox(); hBox.setSpacing(3); final Image image1 = new Image(getClass().getResourceAsStream("duke_44x80.png")); final Image image2 = new Image(getClass().getResourceAsStream("duke_44x80_flip.png")); final ImageView imageView = new ImageView(); imageView.setImage(image1); final SequentialTransition transitionForward = createTransition(imageView, image2); final SequentialTransition transitionBackward = createTransition(imageView, image1); Button btnForward = new Button(); btnForward.setText("Forward"); btnForward.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { transitionForward.play(); } }); Button btnBackward = new Button(); btnBackward.setText("Backward"); btnBackward.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { transitionBackward.play(); } }); hBox.getChildren().add(imageView); hBox.getChildren().add(btnForward); hBox.getChildren().add(btnBackward); StackPane root = new StackPane(); root.getChildren().add(hBox); primaryStage.setScene(new Scene(root, 300, 250)); primaryStage.show(); } SequentialTransition createTransition(final ImageView iv, final Image img){ FadeTransition fadeOutTransition = new FadeTransition(Duration.seconds(1), iv); fadeOutTransition.setFromValue(1.0); fadeOutTransition.setToValue(0.0); fadeOutTransition.setOnFinished(new EventHandler<ActionEvent>(){ @Override public void handle(ActionEvent arg0) { iv.setImage(img);; } }); FadeTransition fadeInTransition = new FadeTransition(Duration.seconds(1), iv); fadeInTransition.setFromValue(0.0); fadeInTransition.setToValue(1.0); SequentialTransition sequentialTransition = SequentialTransitionBuilder .create() .children(fadeOutTransition, fadeInTransition) .build(); return sequentialTransition; } }
Thanks for a very good blog, have to remember that the transition can be applied to any Node element. I was stuck on images for a while.. Lol
ReplyDeleteThanks again :D
Quick question: I'm new to all this, but does this go in a separate file or into my html file?
ReplyDelete