---
title: Programming II Lab 11 - Animations in JavaFX
description: In this lab, we are going to talk about how to create animations in JavaFX, this will not only allow you to create simple animations but to do updates in certain intervals and more.
---
<h1 style='border: none'><center>Programming II Lab 11</center></h1>
<h2 style='border: none'><center>Animations in JavaFX</center></h2>
<h5><center>The Islamic University of Gaza<br>Engineering Faculty<br>Department of Computer Engineering</center></h5>
<h6>Author: Mohammed Nafiz ALMadhoun<span style="float:right">2021/05/14</span></h6>

---

<p style='text-align:justify'>
In this lab, we are going to talk about how to create animations in JavaFX, this will not only allow you to create simple animations but to do updates in certain intervals and more.
</p>

## Animation Class

The animation class is an abstract class that defines common things for all animations, for example:
* Play
* Pause
* Cycle Count
* Auto Reverse

To create an animation, we will use one of the following classes.

### Path Transition Class

As the name indicates that the class create an animation that moves something over a path, so let's create a path and animate something over it.

#### Creating a polyline

Polyline polyline = new Polyline(0,0, 10,10, 100,0, 200,200, 300,200, 400,400);

Notice that polyline takes an array of doubles, each two values indicate a point (x, y).

<center>

Polyline Output
</center>

#### Creating a circle

We will move a circle over the polyline, so we will create a circle shape.

Circle circle = new Circle(10);

#### Creating Path Transition

Duration duration = new Duration(3000);
PathTransition pathTransition = new PathTransition(duration, polyline, circle);
pathTransition.setAutoReverse(true);
pathTransition.setCycleCount(Timeline.INDEFINITE);
pathTransition.play();

now by adding the polyline and circle to a Pane, we could run our scene.

Pane pane = new Pane(polyline, circle);

<center>

Path Transition Example
</center>

### Fade Transition Class

This class will allow us to control the opacity of an object, in this example, we will create a button that fades in when the mouse entered over it and fades out when it exited.

Button btn = new Button("Test");
FadeTransition fadeTransition = new FadeTransition(new Duration(200), btn);
btn.setOpacity(0.4);
btn.setOnMouseEntered(e -> {
    fadeTransition.stop();
    fadeTransition.setFromValue(0.4);
    fadeTransition.setToValue(1);
    fadeTransition.play();
});
btn.setOnMouseExited(e -> {
    fadeTransition.stop();
    fadeTransition.setFromValue(1);
    fadeTransition.setToValue(0.4);
    fadeTransition.play();
});

<center>

Fade transition Example
</center>

### Timeline Class

The Timeline class allows you to create anything you like, you will create a KeyFrame (which is a frame with a time), and add all the keyframes to a Timeline which extends the Animation class.

The KeyFrame will take the duration of the frame, onFinish handler, and KeyValues.

In the following example, we will create a bouncing ball, we will first create a ball class:

class Ball extends Circle {
    Region parent;
    double radius = 0;
    double velocity_y = 0;
    double velocity_x = 0;
    
    public Ball (Region parent, int radius, double velocity_x){
        super(radius);
        this.radius = radius;
        this.parent = parent;
        this.velocity_x = velocity_x;
    }
    public void move (double deltaTime) {
        double currentY = getCenterY();
        if (currentY + radius >= parent.getHeight() && velocity_y > 0) {
            velocity_y *= -0.8;
        }
        velocity_y += 9.8 * deltaTime;
        this.setCenterY(currentY + velocity_y);
        this.setCenterX(this.getCenterX()+ velocity_x);
    }
}

Then we will create a Pane to contain all the balls, and animation to run the `move` method.

ArrayList<Ball> balls = new ArrayList<Ball>();
Pane pane = new Pane();

pane.setOnMousePressed(e -> {
    Ball ball = new Ball(pane, 10, Math.random() - 0.5);
    ball.setCenterX(e.getX());
    ball.setCenterY(e.getY());
    pane.getChildren().add(ball);
    balls.add(ball);
});
Scene scene = new Scene(pane, 640, 480);
KeyFrame keyFrame = new KeyFrame(new Duration (1000/30.0), (event) -> {
    for(Ball ball : balls)
        ball.move(1/30.0);
});
Timeline timeline = new Timeline(keyFrame);
timeline.setCycleCount(-1);
timeline.play();

<center>

Timeline Example
</center>

Notice that in the KeyFrame finish event, we could write any code we want, the KeyFrame could also contain KeyValues, which will control a certain value.

Button btn = new Button("Test");
btn.setLayoutX(0);
btn.setLayoutY(0);
Scene scene = new Scene(new Pane(btn), 200, 200);
KeyValue keyValueX = new KeyValue(btn.layoutXProperty(), 200);
KeyValue keyValueY = new KeyValue(btn.layoutYProperty(), 200);
KeyFrame keyFrame = new KeyFrame(new Duration(3000), keyValueX, keyValueY);
Timeline timeline = new Timeline(keyFrame);
timeline.setCycleCount(-1);
timeline.setAutoReverse(true);
timeline.play();

###### tags: `Programming` `Java` `IUG`

<center>End Of Lab 11</center>