JavaWeb-based JavaComparing Animation in JavaFX vs. Flash

Comparing Animation in JavaFX vs. Flash

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

JavaFX vs. Flash

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.

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

FillTransition (javafx.animation.PathTransition): This Transition changes the filling of a shape over duration. This is done by updating the fill variable of the shape at regular intervals. It starts from the fromValue, if provided; otherwise, it uses the shape’s fill value and stops at thetoValue value.

public Shape startFillTransition() {
Circle circle = new Circle(300, 300, 50);
FillTransition fill = new FillTransition(Duration.millis(3000), circle);
fill.setFromValue(Color.rgb(0, 0, 0));
fill.setToValue(Color.rgb(255, 0, 0));
fill.setCycleCount(Transition.INDEFINITE);
fill.setAutoReverse(true);
fill.play();
return circle;
}

 

RotateTransition (javafx.animation.RotateTransition): This Transition creates a rotation animation that spans its duration. This is done by updating the rotate variable of the node at regular intervals. The angle value is specified in degrees. It starts from the fromAngle, if provided; otherwise, it uses the node’s rotate value. It stops at the toAngle value, if provided; otherwise, it will use start value plus byAngle. The toAngle takes precedence if both toAngle and byAngle are specified.

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

RotateTransition rotate = new RotateTransition(Duration.millis(3000), rect);
rotate.setByAngle(180);
rotate.setCycleCount(Transition.INDEFINITE);
rotate.setAutoReverse(true);
rotate.play();
return rect;
}

 

ScaleTransition (javafx.animation.ScaleTransition): This Transition creates a scale animation that spans its duration. This is done by updating the scaleX, scaleY and scaleZ variables of the node at regular intervals. It starts from the (fromX, fromY, fromZ) value, if provided; otherwise, it uses the node’s (scaleX, scaleY, scaleZ) value. It stops at the (toX, toY, toZ) value, if provided; otherwise, it will use the start value plus the (byX, byY, byZ) value.

public Shape startScaleTransition() {
Rectangle rect = new Rectangle(100, 40, 50, 50);
rect.setArcHeight(0);
rect.setArcWidth(0);
rect.setFill(Color.VIOLET);

ScaleTransition scale = new ScaleTransition(Duration.millis(2000), rect);
scale.setByX(1.5f);
scale.setByY(1.5f);
scale.setCycleCount(Transition.INDEFINITE);
scale.setAutoReverse(true);
scale.play();
return rect;
}

 

SequentialTransition (javafx.animation.SequentialTransition): This transition executes several transitions one after another in a sequential manner.

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

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

PauseTransition pause = new PauseTransition(Duration.millis(1000));
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);

SequentialTransition seq = new SequentialTransition(rect, pause, fade, translate,
rotate, scale);
seq.play();
return rect;
}

StrokeTransition (javafx.animation.StrokeTransition): This Transition creates an animation that changes the stroke color of a shape over duration. This is done by updating the stroke variable of the shape at regular intervals. It starts from the fromValue, if provided; otherwise, it uses the shape’s stroke value. It stops at the toValue value.

public Shape startStrokeTransition() {
Rectangle rect = new Rectangle(100, 40, 100, 100);
rect.setArcHeight(50);
rect.setArcWidth(50);
rect.setFill(null);

StrokeTransition stroke = new StrokeTransition(Duration.millis(3000), rect,
Color.RED, Color.BLUE);
stroke.setCycleCount(Transition.INDEFINITE);
stroke.setAutoReverse(true);
stroke.play();
return rect;
}

 

TranslateTransition (javafx.animation.TranslateTransition): This Transition creates a move/translate animation that spans its duration. This is done by updating the translateX, translateY and translateZ variables of the node at regular intervals. It starts from the (fromX, fromY, fromZ) value, if provided; otherwise, it uses the node’s (translateX, translateY, translateZ) value. It stops at the (toX, toY, toZ) value, if provided; otherwise, it will use the start value plus the (byX, byY, byZ) value.

public Shape startTranslateTransition() {
Rectangle rect = new Rectangle(100, 40, 100, 100);
rect.setFill(Color.CORNFLOWERBLUE);
TranslateTransition translate = new TranslateTransition(Duration.millis(2000), rect);
translate.setByX(200f);
translate.setCycleCount(Transition.INDEFINITE);
translate.setAutoReverse(true);
translate.play();
return rect;
}

 

Timeline (javafx.animation.Timeline): Animation is basically driven by the scaling, rotation, translation and filling properties. The class Timeline allows you to update these property values along the progression of time. The KeyFrame (javafx.animation.KeyFrame) class provided by JavaFX can be used to declare start and end snapshots of the scene’s state transition. The system can automate the animation or can stop, pause and resume, reverse or repeat the transition upon request.

JavaFX vs. Flash

Adobe Flash’s UI for creating animation offers the best advantages a tool can provide. The animator can actually see the timeline and its shape/motion tweening effect on the object created in real-time. Moreover the support of ActionScript, a scripting language to interact with the stage animation and graphic object in Flash, can be used to give another dimension to the animation. The usability and ease of creation has made Flash movies so popular that nowadays it is difficult to find a Web page without any flash animation.

JavaFX vs. Flash_2.jpg
Sophisticated Adobe Flash user interface for creating animation
JavaFX vs. Flash_3.jpg
Eclipse IDE, a tool for creating animation in JavaFX

Juvenile JavaFX lacks in this arena but provides some excellent API support for animation through code. It is definite that JavaFX is nowhere near Adobe Flash on designing creative animation and visualization of animation in real-time, but I believe there is no conflict. Rather JavaFX has a different purpose to serve. Imagine JavaFX (inseparable with Java) as a robust language with all the potentialities for creating Web/enterprise level application, which also has a wing to support animation. If Adobe Flash can be the primary choice for the core animators, JavaFX can be the primary choice for programmers (especially Java programmers) to inject life in to their applications.

Conclusion

The main purpose of JavaFX animation is to leverage data visualization and user experiences — not to create a Flash movie. I believe the present API support for animation, charts and graphics is well suited and wish to see the support for 3D animation/graphics in its future release, as promised.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories