Friday, March 2, 2012

JavaFX 2.0: Interpolator

The abstract class, javafx.animation.Interpolator, defines several interpolate methods, which are used to calculate interpolated values.
Built-in interpolator:
  • DISCRETE
    discrete time interpolation.
  • EASE_BOTH
    ease in/out behavior.
  • EASE_IN
    ease in behavior.
  • EASE_OUT
    ease out behavior.
  • LINEAR
    linear time interpolation.

Example:

package JavaFX_UI;

import javafx.animation.*;
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.scene.layout.VBox;
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);
    }
    
    Scene scene;
    TranslateTransition transition_DISCRETE;
    TranslateTransition transition_EASE_BOTH;
    TranslateTransition transition_EASE_IN;
    TranslateTransition transition_EASE_OUT;
    TranslateTransition transition_LINEAR;
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("http://java-buddy.blogspot.com/");
        StackPane root = new StackPane();
        scene = new Scene(root, 300, 250);
        
        final Image image1 = new Image(getClass().getResourceAsStream("duke_44x80.png"));
        final ImageView imageView = new ImageView();
        imageView.setImage(image1);
        
        transition_DISCRETE  = createTransition_DISCRETE(imageView);
        transition_EASE_BOTH  = createTransition_EASE_BOTH(imageView);
        transition_EASE_IN  = createTransition_EASE_IN(imageView);
        transition_EASE_OUT  = createTransition_EASE_OUT(imageView);
        transition_LINEAR  = createTransition_LINEAR(imageView);
        
        Button btnDISCRETE = new Button();
        btnDISCRETE.setText("DISCRETE");
        btnDISCRETE.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                transition_DISCRETE.play();
            }
        });
        
        Button btnEASE_BOTH = new Button();
        btnEASE_BOTH.setText("EASE_BOTH");
        btnEASE_BOTH.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                transition_EASE_BOTH.play();
            }
        });
        
        Button btnEASE_IN = new Button();
        btnEASE_IN.setText("EASE_IN");
        btnEASE_IN.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                transition_EASE_IN.play();
            }
        });
        
        Button btnEASE_OUT = new Button();
        btnEASE_OUT.setText("EASE_OUT");
        btnEASE_OUT.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                transition_EASE_OUT.play();
            }
        });
        
        Button btnLINEAR = new Button();
        btnLINEAR.setText("LINEAR");
        btnLINEAR.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                transition_LINEAR.play();
            }
        });

        VBox vBox = new VBox();
        vBox.setSpacing(3);
        HBox hBox = new HBox();
        hBox.setSpacing(3);
        
        vBox.getChildren().addAll(btnDISCRETE, 
                btnEASE_BOTH, btnEASE_IN, btnEASE_OUT, btnLINEAR);
        hBox.getChildren().addAll(imageView, vBox);
        
        
        root.getChildren().add(hBox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    TranslateTransition createTransition_DISCRETE(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromY(0)
                .toY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.DISCRETE)
                .cycleCount(1)
                .build();

        return transition;
    }
        
    TranslateTransition createTransition_EASE_BOTH(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromY(0)
                .toY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.EASE_BOTH)
                .cycleCount(1)
                .build();

        return transition;
    }
    
    TranslateTransition createTransition_EASE_IN(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromY(0)
                .toY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.EASE_IN)
                .cycleCount(1)
                .build();

        return transition;
    }
    
    TranslateTransition createTransition_EASE_OUT(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromY(0)
                .toY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.EASE_OUT)
                .cycleCount(1)
                .build();

        return transition;
    }
    
    TranslateTransition createTransition_LINEAR(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromY(0)
                .toY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.LINEAR)
                .cycleCount(1)
                .build();

        return transition;
    }

}


JavaFX 2.0: Implement setOnFinished() to handle end of Transition


package JavaFX_UI;

import javafx.animation.*;
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.StackPane;
import javafx.scene.layout.VBox;
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);
    }
    
    Scene scene;
    TranslateTransition transitionForward, transitionBackward;
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("http://java-buddy.blogspot.com/");
        StackPane root = new StackPane();
        scene = new Scene(root, 300, 250);
        
        VBox vBox = new VBox();
        vBox.setSpacing(3);
        
        final Image image1 = new Image(getClass().getResourceAsStream("duke_44x80.png"));
        final ImageView imageView = new ImageView();
        imageView.setImage(image1);
        
        transitionForward = createTransitionForward(imageView);
        transitionBackward = createTransitionBackward(imageView);
        
        Button btnStart = new Button();
        btnStart.setText("Start");
        btnStart.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                transitionForward.play();
            }
        });
        
        Button btnStop = new Button();
        btnStop.setText("Stop");
        btnStop.setOnAction(new EventHandler<ActionEvent>() {
            
            @Override
            public void handle(ActionEvent event) {
                transitionForward.stop();
                transitionBackward.stop();
            }
        });
        
        vBox.getChildren().add(imageView);
        vBox.getChildren().add(btnStart);
        vBox.getChildren().add(btnStop);
        
        root.getChildren().add(vBox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    TranslateTransition createTransitionForward(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromX(0)
                .toX(scene.widthProperty().doubleValue() - iv.getImage().getWidth())
                .fromY(0)
                .toY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.LINEAR)
                .cycleCount(1)
                .build();
        
        transition.setOnFinished(new EventHandler<ActionEvent>(){

            @Override
            public void handle(ActionEvent arg0) {
                transitionBackward.play();
            }
        });

        return transition;
    }
    
    TranslateTransition createTransitionBackward(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromX(scene.widthProperty().doubleValue() - iv.getImage().getWidth())
                .toX(0)
                .fromY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .toY(0)
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.LINEAR)
                .cycleCount(1)
                .build();
        
        transition.setOnFinished(new EventHandler<ActionEvent>(){

            @Override
            public void handle(ActionEvent arg0) {
                transitionForward.play();
            }
        });

        return transition;
    }
}


Tuesday, February 28, 2012

JavaFX 2.0: TranslateTransition



package javafx_imagetransition;

import javafx.animation.*;
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.StackPane;
import javafx.scene.layout.VBox;
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);
    }
    
    Scene scene;
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("http://java-buddy.blogspot.com/");
        StackPane root = new StackPane();
        scene = new Scene(root, 300, 250);
        
        VBox vBox = new VBox();
        vBox.setSpacing(3);
        
        final Image image1 = new Image(getClass().getResourceAsStream("duke_44x80.png"));
        final ImageView imageView = new ImageView();
        imageView.setImage(image1);
        
        final TranslateTransition transitionForward 
                = createTransitionForward(imageView);
        final TranslateTransition transitionBackward 
                = createTransitionBackward(imageView);
 
        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();
            }
        });
        
        vBox.getChildren().add(imageView);
        vBox.getChildren().add(btnForward);
        vBox.getChildren().add(btnBackward);
        
        root.getChildren().add(vBox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    TranslateTransition createTransitionForward(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromX(0)
                .toX(scene.widthProperty().doubleValue() - iv.getImage().getWidth())
                .fromY(0)
                .toY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.LINEAR)
                .cycleCount(1)
                .build();
        
        return transition;
    }
    
    TranslateTransition createTransitionBackward(final ImageView iv){
        TranslateTransition transition = TranslateTransitionBuilder.create()
                .node(iv)
                .fromX(scene.widthProperty().doubleValue() - iv.getImage().getWidth())
                .toX(0)
                .fromY(scene.heightProperty().doubleValue() - iv.getImage().getHeight())
                .toY(0)
                .duration(Duration.millis(1000))
                .interpolator(Interpolator.LINEAR)
                .cycleCount(1)
                .build();
        
        return transition;
    }
}



Read more: Implement setOnFinished() to handle end of Transition