How To Add Animation To Java Using Expo

Introduction to Java Animation

Animation in Java requires 2 basic steps, creating an animation frame then allowing Java to color the frame. Java blitheness tin be done by Applets, AWT, Swing, and JavaFX. Applets animation is for browser compatible applications, whereas AWT, Swing, and JavaFX are standalone applications. In real-time, most of the applications are standalone merely. So, nosotros will deal with our animation with JavaFX.

Why JavaFX Why not AWT and Swing?

AWT has heavyweight components, and Swing is doesn't have a modern UI. Then, nosotros have considered JavaFX blitheness. It is lightweight and avant-garde modern UI components to make our development easier.

Types of Animations in JavaFX:

Rotate transition
Scale transition
Interpret transition
Fade transition
Fill transition
Stroke transition
Sequential transition
Parallel transition
Pause transition
Path transition

How Does JavaFX Animation Work in Java?

JavaFX animation parcel is an animation that contains all the animation classes. Then, while we are applying animations, we must import them. Utilize animations to our class; we must extend the Blitheness class. This Animation grade has all the required animation packages within information technology.

1. Rotate Transition

This animation gives a rotation characteristic. The bundle is animation.RotateTransition

Syntax:

              RotateTransition rotate = new RotateTransition();  //creating object for Rotate Transition rotate.play();  //applying rotation by using play() method

2. Calibration Transition

This blitheness moves the object in all 3 directions Ten, Y, and Z. The package is animation.ScaleTransition

Syntax:

              ScaleTransition rotate = new ScaleTransition();  //creating object for scale transition rotate.play();  //applying rotation past using play() method

3. Translate Transition

This blitheness moves the object from a position to another position with regular intervals of time. The package is animation.TranslateTransition

Syntax:

              TranslateTransition rotate = new TranslateTransition();  //creating object for Interpret transition rotate.play();  //applying rotation by using play() method

4. Fade Transition

This blitheness makes the object dull by specifying the opacity value. The packet is blitheness.FadeTransition

Syntax:

              FadeTransition rotate = new FadeTransition();  //creating object for fade transition rotate.play();  //applying rotation by using play() method

v. Fill Transition

This blitheness makes the object fill up past two colors, one after the other, by specifying the time intreval. The package is blitheness.FillTransition

Syntax:

              FillTransition rotate = new FillTransition();  //creating object for make full transition rotate.play();  //applying rotation by using play() method

Examples

Allow'due south run across the examples of coffee blitheness are given below:

Example #1 – Rotate Transition

Lawmaking:

              parcel com.rotate.transition; import javafx.animation.RotateTransition; import javafx.application.Awarding; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.scene.shape.Polygon; import javafx.scene.transform.Rotate; import javafx.phase.Phase; import javafx.util.Duration; public class RotateTransitionAnimation extends Application { @Override public void kickoff(Stage outStage) throws Exception { Polygon traingle = new Polygon();// Creating triangle Double[] doubleValues=new Double[] { v.0, five.0, xx.0, 10.0, ten.0, 20.0 }; traingle.getPoints().addAll(doubleValues); traingle.setFill(Color.LIMEGREEN); traingle.setStroke(Color.HOTPINK); traingle.setStrokeWidth(5); RotateTransition rotateTransition = new RotateTransition();// Creating object for Rotate Transition course rotateTransition.setAxis(Rotate.Z_AXIS);// Set Axis rotation in Z axis rotateTransition.setByAngle(360);// Gear up angle rotation 360 degrees rotateTransition.setCycleCount(500);// Set cycle count rotation 500 rotateTransition.setDuration(Elapsing.millis(1000));// Set time duration for change the object rotateTransition.setAutoReverse(true);//machine opposite activation rotateTransition.setNode(traingle);//applying rotate transition on triangle rotateTransition.play();// applying rotation past play method Group root = new Grouping(); //creating grouping for adding elements root.getChildren().add together(traingle); //calculation triangle to group Scene scene = new Scene(root, 700, 500, Color.Black);//creating scene outStage.setScene(scene);//adding scene to stage for display window outStage.setTitle("Triangle Rotate Transition"); outStage.show(); } public static void main(Cord[] args) { launch(args);//launch method calls kickoff() method internally } }

Output:

In this fashion, the triangle rotates.

Example #2 – Scale Transition

Code:

              package com.scale.transition; import javafx.scene.Group; import javafx.stage.Stage; import javafx.util.Duration; import javafx.scene.Scene; import javafx.scene.paint.Color; import javafx.scene.shape.Circumvolve; import javafx.animation.ScaleTransition; import javafx.application.Application; public form ScaleTransitionAnimation extends Application { @Override public void starting time(Stage stage) { Circle circle = new Circle(); // Creating Circle circumvolve.setCenterX(280.0f);// position in Ten direction circle.setCenterY(125.0f);// position in Y direction circumvolve.setRadius(xl.0f);// circle radius circle.setFill(Color.AQUAMARINE);// circle color circle.setStrokeWidth(21);// stroke width of circumvolve ScaleTransition scaleTransition = new ScaleTransition();// creating // object for // scale // transition scaleTransition.setDuration(Duration.millis(2000));// set fourth dimension duration scaleTransition.setNode(circle);// applying rotate transition node on // circle scaleTransition.setByY(1.5);// Y direction movement scaleTransition.setByX(ane.5);// X direction motion scaleTransition.setCycleCount(55);// Gear up cycle count rotation 55 scaleTransition.setAutoReverse(true);// auto reverse activation scaleTransition.play();// applying rotate transition on circumvolve Group root = new Group(); // creating grouping for adding elements root.getChildren().add(circle); // adding triangle to group Scene scene = new Scene(root, 600, 500, Color. AZURE);// creating scene stage.setScene(scene);// calculation scene to stage for display window stage.setTitle("Circle Calibration Transition"); stage.show(); } public static void main(String args[]) { launch(args); } }

Output:

In this way, the circle scales.

Example #three – Translate Transition

Code:

              bundle com.interpret.transition; import javafx.stage.Stage; import javafx.util.Duration; import javafx.scene.Scene; import javafx.scene.pigment.Color; import javafx.scene.shape.Rectangle; import javafx.animation.TranslateTransition; import javafx.application.Application; import javafx.scene.Group; public class TranslateTransitionAnimation extends Application { @Override public void start(Phase outStage) throws Exception { Rectangle square = new Rectangle(50, 50); // Creating square foursquare.setFill(Colour.AQUA); // square border color foursquare.setStroke(Colour.BLUEVIOLET);// square area colour TranslateTransition translateTranstion = new TranslateTransition();// creating object for Interpret transition translateTranstion.setByY(350);// movement in Y direction translateTranstion.setDuration(Duration.millis(1500));// time duration translateTranstion.setCycleCount(450);// Set cycle count rotation 450 translateTranstion.setAutoReverse(true);// motorcar reverse activation translateTranstion.setNode(square);// applying rotate transition node on square translateTranstion.play();// applying rotate transition on circumvolve Grouping root = new Group(); // creating group for calculation elements root.getChildren().add(square); // adding foursquare to grouping Scene scene = new Scene(root, 600, 500, Color.CHOCOLATE);// creating scene outStage.setScene(scene);// adding scene to phase for display window outStage.setTitle("Square Translate Transition"); outStage.show(); } public static void primary(String[] args) { launch(args); } }

Output:

This is how to foursquare scale transition moves.

Instance #4 – Fade Transition

Code:

              package com.fade.transition; import javafx.blitheness.FadeTransition; import javafx.application.Application; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.paint.Colour; import javafx.scene.shape.Ellipse; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; import javafx.util.Duration; public course FadeTransitionAnimation extends Application { @Override public void commencement(Stage outStage) throws Exception { Ellipse ellipse = new Ellipse();  // Creating Ellipse object ellipse.setCenterX(300.0f); //setting ellipse center altitude in X direction ellipse.setCenterY(150.0f); //setting ellipse center distance in Y direction ellipse.setRadiusX(150.0f); //setting radius in 10 direction ellipse.setRadiusY(75.0f);//setting radius in y direction ellipse.setFill(Color.AQUA); // ellipse edge colour ellipse.setStroke(Colour.BLUEVIOLET);// ellipse area color FadeTransition fadeTransition = new FadeTransition();// creating Fade transition object fadeTransition.setDuration(Elapsing.millis(5000));// time duration fadeTransition.setFromValue(10);//setting opacity value for fading fadeTransition.setToValue(0.i); fadeTransition.setCycleCount(900);// Fix cycle count rotation 900 fadeTransition.setAutoReverse(true);// auto reverse activation fadeTransition.setNode(ellipse);// applying fade transition node on ellipse fadeTransition.play();// applying fade transition on ellipse Grouping root = new Group(); // creating grouping for calculation elements root.getChildren().add(ellipse); // adding ellipse to group Scene scene = new Scene(root, 600, 500, Colour.CHOCOLATE);// creating scene outStage.setScene(scene);// adding scene to stage for display window outStage.setTitle("Ellipse Fade Transition"); outStage.show(); } public static void primary(String[] args) { launch(args); } }

Output: