Gli interpolatori, mentre eseguono le animazioni impostate tramite codice, lanciano anche degli eventi che noi possiamo analizzare per capire cosa stia facendo l'oggetto.
Possiamo fermare e riavviare l'animazione con i metodi pause() e resume() e per esempio, quando viene eseguita la funzione resume() l'interpolatore lancia l'evento onResumeEVENT.
Quando l'animazione è in corso viene invece lanciato l'evento onProgressEVENT, mentre a fine animazione viene lanciato onEndEVENT.
Possiamo sfruttare questi eventi per lanciare azioni in un determinato momento, per esempio, possiamo far ripartire un'animazione quando essa finisce grazie all'evento onEndEVENT associato alla funzione redo() (che abbiamo già sfruttato nei precedenti esempi). Questo è molto utile qualora volessimo realizzare automaticamente un'animazione in loop; un'altra possibilità è offerta dalla funzione yoyo(), che "inverte" l'animazione appena eseguita.
Proviamo a creare un cubo che ruota continuamente con un effetto di rimbalzo.
Al posto della piramide, nella funzione createScene, utilizziamo la primitiva Box (cubo). Useremo un RotationInterplator e/o un oggetto Ease con easingOut per impostare il rimbalzo.
Listato 27. Imposta la rotazione il rimbalzo dell'oggetto
var easing = new Ease();
// Imposta easing e metodo
easing.easingOut().bounce(2,0.3);
// Creiamo un interpolatore che esegue l'animazione di rotazione
rotation = new RotationInterpolator( easing.create(),100, -90, 90);
Con il metodo bounce abbiamo impostato due rimbalzi, con una riduzione di 0.3. Ricordiamo che il metodo bounce è esponenziale come impostazione predefinita.
La rotazione del cubo è stata impostata lungo 100 fotogrammi, da -90 a 90 gradi.
Per far sì che l'animazione vada in loop, dobbiamo intercettare l'evento onEndEVENT lanciato dall'interpolatore, e sfruttare la funzione yoyo().
// Intercettiamo l'evento onEndEVENT per creare il loop
rotation.addEventListener( InterpolationEvent.onEndEVENT, this, loop );
L'evento è definito come InterpolationEvent.onEndEVENT e loop è la funzione che viene richiamata quando l'evento si verifica:
// La funzione che viene richiamata sfrutta il comando yoyo()
function loop(){
rotation.yoyo();
}
Il risultato ottenuto è il seguente
Animazione che si riavvolge e riparte, in loop
Notiamo come l'animazione venga ripetuta continuamente, riavvolgendosi e ripartendo grazie alla funzione yoyo() offerta da Sandy.
Possiamo realizzare molti altri effetti, per esempio modificare l'asse di rotazione utilizzando setAxisOfRotation. Proviamo a scrivere questo codice:
// Imposta l'asse di rotazione
rotation.setAxisOfRotation( new Vector( 5, 5, 5 ));
Ecco il risultato:
Modifica dell'asse di rotazione
O ancora possiamo impostare un nuovo centro di rotazione per l'oggetto utilizzando setPointOfReference.
// Imposta il nuovo punto di riferimento
rotation.setPointOfReference( new Vector( 30, 0, 0) );
Così da ottenere la modifica del centro di rotazione, come vedremo di seguito.
Da notare che il vettore utilizzato come parametro nella funzione setPointOfReference imposta il centro di rotazione basandosi sul centro predefinito dell'oggetto e non sul sistema di coordinate globali.
Altri movimenti
Con Sandy possiamo realizzare tantissime cose, l'unico limite come si suol dire è la nostra fantasia!
Vogliamo creare un oggetto (o un gruppo di oggetti) che si muova su un percorso curvo? Utilizziamo il PathInterpolator con un BezierPath!
Vogliamo creare un uomo che cammina sfruttando le forme primitive? Creiamo le varie parti del corpo e poi uniamole e facciamole muovere grazie agli interpolatori...insomma, scateniamo la nostra fantasia!
"© Petit Publications 2006" - diritti riservati
