FAQ JavaFXConsultez toutes les FAQ

Les animations sont construites à partir de la classe javafx.animation.Timeline et des autres classes présentes dans le package javafx.animation.
Une animation consiste en une séquence d'étapes ou animations clés appelées "key Frames" placées dans une ligne temporelle.
Ces étapes, permettent d'indiquer les changements dans l'état des variables qui servent à animer notre objet graphique. Une étape clé est modélisée par la classe javafx.animation.KeyFrame.

L'exemple suivant affiche un rectangle aux bords arrondis et rempli d'un dégradé rouge dans une fenêtre non-décorée :

import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
 
var rect = Rectangle {
    x: 50,
    y: 50
    width: 200,
    height: 100
    arcWidth: 20,
    arcHeight: 20
    fill: LinearGradient {
        startX: 0,
        startY: 0
        endX: 0,
        endY: 1
        proportional: true
        stops: [
            Stop {
                offset: 0.0
            color: Color.RED},
            Stop {
                offset: 1.0
            color: Color.DARKRED}
        ] // stops
 
    }
        };
Stage {
    title: "Test d'animation"
    width: 300
    height: 200
    style: StageStyle.TRANSPARENT;
    scene: Scene {
        fill: Color.TRANSPARENT
        content: rect;
    }
}

Pour animer le rectangle en faisant varier sa largeur, définie dans son champ width, nous pouvons déclarer une animation de la manière suivante :

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
 
[...]
 
var anim = Timeline {
    repeatCount: Timeline.INDEFINITE;
    autoReverse: true;
    keyFrames: [
        KeyFrame {
            time: 0s;
            action: function():Void {
                rect.width = 200;
            }
        }
        KeyFrame {
            time: 1s;
            action: function():Void {
                rect.width = 50;
            }
        }
    ]
}
anim.playFromStart();

Ce code définie une animation qui dure 1 seconde : il y a une étape clé à 0 seconde et une autre à 1 seconde.
Grâce au callback que nous avons défini dans la variable action de chaque étape, nous pouvons affecter une nouvelle largeur à notre rectangle.
Notre animation se répète indéfiniment car nous avons spécifié la constante Timeline.INDEFINITE, nous aurions pu également spécifier un nombre supérieur ou égal à 1.

De plus, le champ autoReverse indique que l'animation s'inverse lorsqu'elle arrive à la fin.
Ainsi l'animation ira de l'étape 0s à l'étape 1s (1 seconde d'attente entre les deux étapes) puis de l'étape 1s à l'étape 0s (à nouveau 1 seconde d'attente entre les deux étapes). Si ce champ est omis, l'animation passera directement de l'étape 1s à l'étape 0s et nous ne verrons jamais varier la largeur du rectangle.

L'appel à anim.playFromStart(); permet de démarrer une animation depuis le début de la ligne temporelle.

Il suffit d'appeler sa méthode stop().

Il suffit d'appeler sa méthode play(). L'animation reprendra à partir du point où elle s'est précédemment arrêtée.
Si elle n'a jamais été lancée précédemment, elle démarrera au temps 0 de la ligne temporelle.

Il suffit d'appeler sa méthode playFromStart(). Cette méthode relancera l'animation depuis le début de la ligne temporelle.

Il est possible de modifier la vitesse d'une animation en modifiant son champ rate. Celui-ci est à 1 par défaut.

Pour doubler la vitesse d'une animation, il suffit de le mettre à 2. Pour ralentir une animation de moitié, il suffit de le mettre à 0.5.

Il suffit de lui donner une valeur négative pour son champ rate.
L'animation ira alors à rebours depuis son emplacement actuel dans la ligne temporelle.

Il faut modifier son champ time en lui donnant une Duration.

Il faut modifier son champ repeatCount.
Sa valeur par défaut est 1.0, l'animation s'exécutera donc une seule et unique fois.
Pour répéter l'animation indéfiniment, il faut utiliser la valeur javafx.animation.Timeline.INDEFINITE.

Il faut mettre son champ autoReverse à la valeur true.
Si l'animation se répète plus d'une fois, son rate sera inversé à chaque fois qu'elle arrive à une extrémité de sa ligne temporelle.

La valeur par défaut de ce champ est false.

Notre animation se contente de modifier la largeur du rectangle à l'étape 0s puis à l'étape 1s ce qui n'est guère joli à l'écran. Il est possible de spécifier que les valeurs qui sont animées sont en fait interpolées à chaque pas de temps. Ainsi le code suivant :

 
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
 
[...]
 
var anim = Timeline {
    repeatCount: Timeline.INDEFINITE;
    autoReverse: true;
    keyFrames: [
        KeyFrame {
            time: 0s;
            values: [
                rect.width => 200
            ]
        }
        KeyFrame {
            time: 1s;
            values: [
                rect.width => 50
            ]
        }
    ]
 }
anim. playFromStart() ;
 

Produira une animation fluide de la largeur du rectangle.

La notation variable => valeur est un raccourci qui évite de devoir créer manuellement des objets de type javax.animation.KeyValue et javax.animation.KeyValueTarget.
Il est de plus possible de simplifier la création des étapes clés en utilisant la notation suivante ce qui évitera de devoir créer des KeyFrame manuellement :

var anim = Timeline {
    repeatCount: Timeline.INDEFINITE;
    autoReverse: true;
    keyFrames: [
      at(0s) {
        rect.width => 200;
      }
      at(1s) {
        rect.width => 50;
      }
    ]
 }

Enfin JavaFX peut estimer pour vous les conditions initiales des variables qui sont animées, on peut ainsi omettre l'étape clé à 0s :

var anim = Timeline {
    repeatCount: Timeline.INDEFINITE;
    autoReverse: true;
    keyFrames: [
        KeyFrame {
            time: 1s;
            values: [
                rect.width => 50
            ]
        }
    ]
 }

Ou encore :

var anim = Timeline {
    repeatCount: Timeline.INDEFINITE;
    autoReverse: true;
    keyFrames: [
      at(1s) {
        rect.width => 50;
      }
    ]
 }

Ainsi à 0 secondes, rect.width reviendra à sa valeur initiale qui était de 200 lorsque nous avons défini notre variable rect.

Il est possible de spécifier l'interpolation en utilisation le mot-clé tween suivit d'une instance d'un javafx.animation.Interpolator.
L'interpolation par défaut est linéaire.

Ainsi la définition suivante :

rect.width => 50;

Est équivalente à :

import javafx.animation.Interpolator;
 
[...]
 
        rect.width => 50 tween Interpolator.LINEAR;

Si nous spécifions au contraire :

var anim = Timeline {
    repeatCount: Timeline.INDEFINITE;
    autoReverse: true;
    keyFrames: [
      at(1s) {
        rect.width => 50 tween Interpolator.EASEOUT;
      }
    ]
 }

L'animation de notre rectangle donnera l'impression d'être amorti quand sa largeur approchera de sa plus petite valeur (à l'étape clé 1s) donnant l'impression d'un mouvement plus naturel.
Au contraire l'utilisation d'Interpolator.EASEIN accélérera le mouvement à l'approche de l'étape clé 1s.

Utiliser des interpolations dans la ligne temporelle permet de simuler des mouvements qui paraissent plus naturels et plus agréables à l'oeil, par exemple si nous désirons animer un piston hydraulique.

Vous pouvez soit directement étendre la classe javafx.animation.Interpolator soit sa classe fille javafx.animation.SimpleInterpolator.