Les FAQs Java :
FAQ JAVA FAQ Java EE FAQ Java ME FAQ Java XML FAQ JavaFX FAQ Java GUI FAQ Struts FAQ JSF FAQ JDBC JDO FAQ Hibernate FAQ Spring FAQ Eclipse FAQ NetBeans FAQ JCreator FAQ Maven 2

FAQ JavaFXConsultez toutes les FAQ

Nombre d'auteurs : 4, nombre de questions : 86, dernière mise à jour : 2 juillet 2013 

 
OuvrirSommaireAnimations

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 :

 
Sélectionnez

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 :

 
Sélectionnez

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.

Créé le 27 janvier 2009  par bouye

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

Créé le 27 janvier 2009  par bouye

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.

Créé le 27 janvier 2009  par bouye

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

Créé le 27 janvier 2009  par bouye

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.

Créé le 27 janvier 2009  par bouye

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.

Créé le 27 janvier 2009  par bouye

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

Créé le 27 janvier 2009  par bouye

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.

Créé le 27 janvier 2009  par bouye

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.

Créé le 27 janvier 2009  par bouye

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 :

 
Sélectionnez

 
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 :

 
Sélectionnez
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 :

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

Ou encore :

 
Sélectionnez
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.

Créé le 27 janvier 2009  par bouye

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 :

 
Sélectionnez
rect.width => 50;

Est équivalente à :

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

Si nous spécifions au contraire :

 
Sélectionnez
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.

Créé le 27 janvier 2009  par bouye

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

Créé le 27 janvier 2009  par bouye
Les codes sources sont, sauf mention spéciale, libres de droits, et vous pouvez les utiliser à votre convenance. Pour le reste, ce document constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2009 Developpez LLC : Tous droits réservés Developpez LLC. Aucune reproduction, ne peux en être faite sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.