Più timeline per un oggetto

L'articolo Basic Timeline Animation nella sezione Animation di JavaFX Learn mostra un esempio semplice ma di effetto su come animare un oggetto in due dimensioni, usando due differenti timeline.

Come bonus noi ci aggiungiamo pure una variazione delle dimensioni nostro oggetto, gestita da una terza timeline.

Si può vedere l'applicazione in esecuzione in questa pagina.

Stage, scena e attore

Definiamo uno stage con la sua scena e mettiamo al suo interno un cerchio:

package timeline;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

def circle = Circle {
centerX: 50, centerY: 50, radius: 10
fill: Color.DARKORCHID
}

Stage {
title: "Animator"

scene: Scene {
 width: 100, height: 100
 fill: Color.LIGHTGREEN
 content: circle
}
}

Doppia azione

Definiamo ora due timeline che operano su due variabili numeriche, x e y, assegnando a ognuna delle due un valore crescente tra 10 e 90, la timeline continurà indefinitivamente e, ogni volta che viene raggiunto un estremo, si invertirà la direzione di crescita (come dire: la sequenza sarà ... 88, 89, 90, 89, 88 ...), usiamo l'interpolatore EASEBOTH così, al raggiungere degli estremi, il movimento risulta rallentato. Notiamo ancora che i tempi impiegati per compiere il ciclo sono differenti tra le due timeline, questo renderà il movimento lungo x e y più indipendente col passar del tempo.
Notiamo infine che le timeline sono fatte partire immediatamente:

import javafx.animation.Interpolator;
import javafx.animation.Timeline;

var x = 10;
var y = 10;

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: at (1.5s) {x => 90 tween Interpolator.EASEBOTH}
}.play();

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: at (2.7s) {y => 90 tween Interpolator.EASEBOTH}
}.play();

Per rendere ancora più bizzarra la situazione, aggiungiamo una terza timeline che regolerà il raggio del nostro cerchio, facendolo variare tra 5 e 10, in mezzo secondo e in modo lineare:

var r = 5;
...
Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: at (0.5s) {r => 10 tween Interpolator.LINEAR}
}.play();

Ci resta ora di associare x, y e r al cerchio, in modo che si muova e cambi dimensione al loro variare:

def circle = Circle {
centerX: bind x, centerY: bind y, radius: bind r
...
}

E così il nostro codice é completo, rivediamolo qui a seguire:

package timeline;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

var x = 10;
var y = 10;
var r = 5;

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: at (1.5s) {x => 90 tween Interpolator.EASEBOTH}
}.play();

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: at (2.7s) {y => 90 tween Interpolator.EASEBOTH}
}.play();

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: at (1s) {r => 10 tween Interpolator.LINEAR}
}.play();

def circle = Circle {
centerX: bind x, centerY: bind y, radius: bind r
fill: Color.DARKORCHID
}

Stage {
title: "Animator"

scene: Scene {
 width: 100, height: 100
 fill: Color.LIGHTGREEN
 content: circle
}
}