Monday, February 27, 2012

JavaFX 2.0: Image transition effect



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;
    }
}


2 comments:

  1. 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

    Thanks again :D

    ReplyDelete
  2. Quick question: I'm new to all this, but does this go in a separate file or into my html file?

    ReplyDelete