Timeline

The Timeline is a key component of animation in JavaFX. A Timeline is used to establish when, and in what sequence, key parts of an animation occur.

Key Variables

keyFrames A sequence of KeyFrames defining specific points in the animation.
repeatCount The number of times the animation is played. It can be set to Timeline.INDEFINITE to loop continuously.
autoReverse If set to true the animation alternates between playing forward and backword every time it is repeated.
rate Speed at which the animation is played. (ie. 1=normal -1=reverse .5=slow-motion 5=fast-forward)
interpolate Enables or disables interpolation. If set to false it will override any interpolation set in a KeyFrame.
time A Duration that contains the current position in the Timeline.

Read Only Variables

paused Returns true if a running animation is paused.
running Returns true if the animation is running. A paused animation is still considered to be running while a stopped one is not.
currentRate The current rate at which the animation is playing. It will be 0.0 when stopped or paused and negative when playing in reverse.

Control Functions

play() Plays the animation from the current position on the Timeline.
playFromStart() Begins play from the start of the Timeline.
pause() Pauses animation, leaving the position at the current time.
stop() Stops the animation and resets the position to the beginning of the Timeline.

Example

This example creates a simple animated circle that moves back and forth continuously across the screen.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.shape.Circle;
import javafx.animation.Interpolator;
 
 
var xpos = 50;
 
var t = Timeline{
    autoReverse: true
    repeatCount: Timeline.INDEFINITE
 
    keyFrames: [
        KeyFrame {
            time: 0s
            values: xpos => 50
        },
        KeyFrame {
            time: 3s
            values: xpos => 450 tween Interpolator.LINEAR
        }
    ]
}
 
t.play();
 
Stage {
    title: "Animation Demo"
    scene: Scene {
        width: 500
        height: 100
        content: [
            Circle {
                radius: 10
                centerX: bind xpos
                centerY: 50
            }
        ]
    }
}

Demo