Animazioni con Papervision3D e Caurina Tweener

Abbiamo già visto come si muove e ruota un oggetto tramite le sue proprietà e abbiamo già accennato in una lezione precedente all'uso delle classi Tweener caurina, una libreria che sostituisce in modo efficace i tween presenti in flash. Ora vedremo come realizzare movimenti più complessi affidandoci proprio a Caurina.

Dopo aver scaricato e importato la classe (import Caurina.transitions.Tweener), utilizzarla risulta estremamente semplice:

mioOggetto.addTween(oggetto, parametri)

Anche se questi Tweener non sono stati progettati espressamente per Papervision, ci permettono di gestire le transizioni di un qualsiasi oggetto DiplayObject3D, se ad esempio vogliamo muovere la telecamera in linea retta basterà scrivere:

Tweener.addTween(camera, { z:1000 , time:1 , transition:"easeinoutexpo"});

dove con time definiamo il tempo di esecuzione mentre con transition il tipo di transizione.

Esistono più di 30 tipi di transizioni accettate da Caurina, ecco un breve elenco delle più diffuse:

Se vogliamo personalizzare le dinamiche di transizione possiamo utilizzare il parametro transitionParams.

Infine possiamo sfruttare alcuni eventi: quando viene completata un'animazione si può richiamare una funzione tramite il parametro onComplete:funzione, mentre se si vuole richiamare una funzione all'avvio di un'animazione onStart.

Vediamo come applicare la classe Caurina ad una semplice struttura 3D.

// [ definizioni iniziali ]

var cubo1:Cube = new Cube( new MaterialsList({all:new ColorMaterial(0x330033)}), 300, 200, 150);
var cubo2:Cube = new Cube( new MaterialsList({all:new ColorMaterial(0x333300)}), 300, 200, 150);
    
posiziona(cubo1 , 0, -200, 100);
posiziona(cubo2 , -300, -200, -200);
cubo1.rotationY = 30;
cubo2.rotationY = 30;
scena.addChild(cubo1);
scena.addChild(cubo2);

Tweener.addTween(camera, { x:-2900, y:1400, z:0,
                           time:5, transition:"easeinoutexpo",
                           onComplete:anim}
);

function anim()
{
  if (camera.x == -2900)
    Tweener.addTween(camera, 
                     { x:0, y:2900, z:-100, 
                       time:5, transition:"easeinoutexpo",
                       onComplete:anim });
                         
  if (camera.x == 0)
    Tweener.addTween(camera, 
                     { x:-300, y:-850, z:-700, 
                       time:5, transition:"easeinoutexpo",
                       onComplete:anim });

  if (camera.x==-300)
    Tweener.addTween(camera,
                     { x:-2900, y:1400, z:0, time:5,
                       transition:"easeinoutexpo",
                       onComplete:anim });
}

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event):void
{
  camera.lookAt(cubo1);
	renderer.renderScene(scena, camera, viewport);
}

La funzione centrale di questo esempio è anim che, finita un'animazione verifica dov'è la camera e ne avvia un altra. L'ultima animazione riposiziona la camera al punto di partenza innescando così un ciclo di animazioni continuo.

Il codice completo dell'animazione è scaricabile qui.