Timelines de duración variable y el at(..)

Uno de los inconvenientes de trabajar en un ambientea tan nuevo como el JavaFX script, es que no abundan las fuentes de información.

Una de las cosas que no tenía claras (seguramente porque no investigué lo suficiente, o no miré mejor los ejemplos), era cómo se hace que un timeline tenga duración variable.

Bueno, ahora descubrí que diablos es el at(..) en los timeline y cómo se hace para que la duración sea variable.

Primera cosa, cuando uno usa at(), en realidad está usando una "abreviatura" en la manera de definir un timeline. La idea es que sólo sea una opción breve para escribir el código, pero por lo mismo, no es la forma más "potente".

Tomemos este ejemplo:

var x:Number;
Timeline {
    repeatCount: 1
    keyFrames: [
        at (0s) { x => 0.0}
        at (3s) { x => 100.0}
    ]
}.play();

En él, definimos una variable x, que al segundo 0s -de iniciado el timeline- asume un valor de 0.0, luego, x asumirá gradualmente los valores entre 0.0 y 100.0, alcanzando el máximo valor (100.0) en 3s segundos.

El asunto que me faltaba comprender era... ¿como cambiaba el tiempo en at(3s)?, porque no acepta ni variables ni bind dentro de los paréntesis.

Pues resulta que con at(..) no lo vas a conseguir (por lo menos eso entiendo en este momento), la forma correcta y potente de usar las lineas de tiempo es esta:

var dur=3s;
var x:Number;
Timeline {
    repeatCount: 1
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [x=>0]
        },
        KeyFrame {
            time: bind dur
            values: [x=>100]
        }
    ]
}.play();

De hecho, esta forma de definir un timeline permite anidar timelines o agregar un action: en cada KeyFrame, de manera que una acción sea ejecutada cada vez que una etapa de la animación o transición se completa.

var dur=3s;
var dur2=5s;
var x:Number;
Timeline {
    repeatCount: 1
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [x=>0]
        },
        KeyFrame {
            time: bind dur
            canSkip: true
            values: [x=>50]
            action: function() {
                println("completo etapa 1");
            };
        },
        KeyFrame {
            time: bind dur2
            canSkip: true
            values: [x=>200]
            action: function() {
                println("completo etapa 2");
            };
        }
    ]
}.play();