Animation in JavaFX vs. Flash

• April 3, 2012
• By Manoj Debnath
• Bio »
• Send Email »
• More Articles »

JavaFX 2.x combines some of the most useful animation APIs into one powerhouse of a program. Some innovatively written code in JavaFX can even perform like the giant Adobe Flash for animation. In this JavaFX animation tutorial, I shall try to explore all possible API support for animation in JavaFX with comparisons to Adobe Flash.

API Overview of JavaFX Animation

Animation in JavaFX can be broadly classified into three parts: timeline, animation and transitions. TheAnimation (javafx.animation.Animation) class provides the core functionality of all animations used in the JavaFX runtime. It is the parent class of all animation in JavaFX.

Animations in JavaFX

Transition (javafx.animation.Transition) is an abstract class containing core APIs required by all Transition-based animations. It helps to incorporate animations in an internal timeline and can compose multiple animations, which may be executed in parallel or sequentially. The following classes are the direct extension of the Transition class. The code below can be used to test different transition APIs.

• Post a comment
• Email Article
• Print Article
•  Share Articles

package com.animation.demo;
import javafx.animation.*;
import javafx.animation.PathTransition.OrientationType;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Demo extends Application{
   public static void main(String[] args){
     Application.launch(args);
   }
   @Override
   public void start(Stage stage) throws Exception {            
       GridPane grid = new GridPane();
     grid.setPadding(new Insets(10, 0, 0, 0));
     grid.setHgap(70);
     grid.setVgap(10);
          
     Text t1 = new Text("Fade Transition");
     t1.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t1, 1, 0);
     grid.add(startFadeTransition(), 1, 1);

     Text t2 = new Text("Fill Transition");
     t2.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t2, 2, 0);
     grid.add(startFillTransition(), 2, 1);

     Text t3 = new Text("Rotate Transition");
     t3.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t3, 3, 0);
     grid.add(startRotateTransition(), 3, 1);

     Text t4 = new Text("Scale Transition");
     t4.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t4, 1, 2);
     grid.add(startScaleTransition(), 1, 3);

     Text t5 = new Text("Translate Transition");
     t5.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t5, 2, 2);
     grid.add(startTranslateTransition(), 2, 3);

     Text t6 = new Text("Stroke Transition");
     t6.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t6, 3, 2);
     grid.add(startStrokeTransition(), 3, 3);

     Text t7 = new Text("Sequential Transition");
     t7.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t7, 1, 4);
     grid.add(startSequentialTransition(), 1, 5);

     Text t8 = new Text("Path Transition");
     t8.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t8, 2, 4);
     grid.add(startPathTransition(), 2, 5);

     Text t9 = new Text("Parallel Transition");
     t9.setFont(Font.font("Tahoma", FontWeight.BOLD, 10));
     grid.add(t9, 3, 4);
     grid.add(startParallelTransition(), 3, 5);

     Scene scene = new Scene(grid);
     stage.setScene(scene);
     stage.setWidth(640);
     stage.setHeight(480);
     stage.show();      
}

FadeTransition (javafx.animation.FadeTransition): A fade transition changes the opacity of a node over a given time. This is done by updating the opacity variable of the node at regular intervals. It starts from the fromValue, if provided; otherwise it uses the node's opacity value. It stops at thetoValue value, if provided; otherwise, it will use the start value plusbyValue.

public Shape startFadeTransition() {
     Circle circle = new Circle(200, 200, 50, Color.rgb(0, 255, 0));
     FadeTransition fade = new FadeTransition(Duration.millis(3000), circle);
     fade.setFromValue(1.0);
     fade.setToValue(0.1);
     fade.setCycleCount(Transition.INDEFINITE);
     fade.setAutoReverse(true);
     fade.play();
     return circle;
}

PathTransition (javafx.animation.FillTransition): A path transition moves a node along a path from one end to the other over a given period time. The translation along the path is done by updating thetranslateX and translateY variables of the node, and the rotate variable will get updated at regular intervals if orientation is set toOrientationType.ORTHOGONAL_TO_TANGENT. The animated path is defined by the outline of a shape.

public Shape startPathTransition() {
     Rectangle rect = new Rectangle(100, 40, 100, 100);
     rect.setArcHeight(50);
     rect.setArcWidth(50);
     rect.setFill(Color.CYAN);

     Path path = new Path();
     path.getElements().add(new MoveTo(0f, 50f));
     path.getElements().add(new CubicCurveTo(40f, 10f, 390f, 240f, 1000, 50f));

     PathTransition pathTransition = new PathTransition();
     pathTransition.setDuration(Duration.millis(10000));
     pathTransition.setNode(rect);
     pathTransition.setPath(path);
     pathTransition.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
     pathTransition.setCycleCount(Transition.INDEFINITE);
     pathTransition.setAutoReverse(true);

     pathTransition.play();
     return rect;
}

ParallelTransition (javafx.animation.ParallelTransition): A parallel transition executes several transitions simultaneously.

public Shape startParallelTransition() {
     Rectangle rect = new Rectangle(100, 40, 100, 100);
     rect.setArcHeight(50);
     rect.setArcWidth(50);
     rect.setFill(Color.DARKSALMON);

     final Duration SEC_2 = Duration.millis(2000);
     final Duration SEC_3 = Duration.millis(3000);

     FadeTransition fade = new FadeTransition(SEC_3);
     fade.setFromValue(1.0f);
     fade.setToValue(0.3f);
     fade.setCycleCount(Transition.INDEFINITE);
     fade.setAutoReverse(true);
     TranslateTransition translate = new TranslateTransition(SEC_2);
     translate.setFromX(-100f);
     translate.setToX(100f);
     translate.setCycleCount(Transition.INDEFINITE);
     translate.setAutoReverse(true);
     RotateTransition rotate = new RotateTransition(SEC_3);
     rotate.setByAngle(180f);
     rotate.setCycleCount(Transition.INDEFINITE);
     rotate.setAutoReverse(true);
     ScaleTransition scale = new ScaleTransition(SEC_2);
     scale.setByX(1.5f);
     scale.setByY(1.5f);
     scale.setCycleCount(Transition.INDEFINITE);
     scale.setAutoReverse(true);

     ParallelTransition pt = new ParallelTransition(rect, fade, translate, rotate, scale);
     pt.play();
     return rect;
}

Tags: Flash, JavaFX, animation