Matteo Pignatelli
a- a+

La decelerazione

Questo tutorial andrà a coprire l'argomento della decelerazione (easing).
La domanda comune è: "Come posso far muovere un oggetto da un punto all'altro, facendo iun modo che deceleri gradatamente man mano che si avvicina al punto finale?"
Questo effetto è chiamato Easing, ed piuttosto semplice da implementare una volta capito il funzionamento.

L'easing viene usato solitamente per ricreare effetti di movimento realistici.
Immaginate di guidare una macchina a 90 Km/h, tornando a casa.
Voi non andrete a 90 all'ora fino a quando sarete davanti a casa per poi di colpo fermarvi, man mano che vi avvicinerete al parcheggio la velocità diminuirà a 70, 50, 25, 10, 6, 4, 2, 1 e poi 0.
Allo stesso modo quando partirete la velocità si alzerà gradatamente dallo 0 in su, questa è l'accelerazione (easing out).
In questo tutorial si parlerà della decelerazione (easing in).

L'easing (lo chiameremo così d'ora in poi) è fondamentalmente una formula semplice che può essere modificata per ottenere l'effetto desiderato.
Una volta compresa, questa formula può essere usata non solo per il movimento ma può essere implementata anche per la rotazione, la scala di un oggetto, l'_alpha o anche per cambiare il colore di un movieclip.
In pratica in ogni situazione dove vorrete che qualcosa cambi gradatamente fino al suo stato finale.

Ok, diamo un'occhiata alla fisica che verrà applicata.

Siete in un dato punto e volete fermarvi in un altro punto.

Come prima cosa facciamolo con un solo salto.
Creeremo un oggetto e una situazione che andremo ad usare per tutta la durata del tutorial.
Create una forma a vostra scelta, convertitela in un movieclip e dategli le seguenti action:

onClipEvent(load){
_x=0;
_y=0;
}
onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}
onClipEvent(enterFrame){
_x=targetx;
_y=targety;
}

Questo è quello che farà:
1. Prima di tutto si posizionerà a coordinate 0,0.
2. Quando verrà premuto il mouse, le coordinate del mouse verranno registrate in targetx e targety.
3. Il movieclip cambierà le proprie coordinate con targetx e targety

Provatelo.
Ovunque l'oggeto sia posizionato, quando premerete il mouse, l'oggetto apparirà sotto la punta del cursore.
Lo farà istantaneamente, in un frame.

Ok.
Ora, facciamo il primo easing.

Questa è la teoria:

1. sappiamo dove siamo.
2. sappiamo dove vogliamo andare.
3. possiamo calcolare la distanza tra i due punti.
4. ci muoviamo esattamente fino alla metà della distanza tra i due punti.
5. dalla nostra nuova posizione....

1. sappiamo ancora dove siamo.
2. il punto dove dobbiamo arrivare è ancora lo stesso.
3. siamo in grado di calcolare la nuova distanza.
4. ci spostiamo esattamente alla metà della nuova distanza.
5. di nuovo dal punto 1.

Ogni volta che eseguiamo il loop, andremo a muoverci sempre meno.
Quindi inizieremo col muoverci velocemente e poi, man mano, diminuiremo il movimento, rallentando fino ad arrivare al punto finale.
A livello teorico, noi non arriveremo mai al punto finale perchè ogni volta che ci muoveremo ci sposteremo sempre della metà della distanza che manca dal punto, senza mai raggiungerlo.
Ma quando siamo a 1/100 di pixel dal punto di destinazione, possiamo tranquillamente dichiarare di essere arrivati!

Quindi, traducendo il tutto in action script, per prima cosa faremo per ogni calcolo una linea di codice separata, più avanti darò la formula finale che potrete imparare a memoria per usarla quando serve.
Per maggior semplicità, inizieremo solo con lo spostamento sulla _x.
Poi avremo solo da aggiungere le stesse linee di codice cambiando _x con _y.

Ecco qua:

 

                onClipEvent(load){
_x=0;
_y=200;
}

onClipEvent(mouseDown){
targetx=_root._xmouse;
}
onClipEvent(enterFrame){

distx=targetx-_x;
movex=distx/2;

_x+=movex;
}

 

 

Nota: molte persone hanno chiesto chiarimenti sull'operatore += .
Questo è l'operatore somma e riassegna.
Prende la variabile, addiziona il valore e riassegna il risultato alla variabile.
Per esempio: _x+=movimento è la stessa cosa di _x= _x+movimento

Traducendo la teoria di prima:

1. dove siamo noi è _x
2. dove vogliamo arrivare è targetx
3. la distanza da percorrere è targetx-_x o distx
4. la metà della distanza da percorrere è distx/2 che assegnamo a movex e poi addizioniamo a _x: _x+=movex
5. il prossimo frame riporta al punto 1

Testatelo.
Ora quando premete il mouse l'oggetto non appare di colpo sotto il mouse ma si avvicina gradatamente.
Ah, ovviamente per ora si muove solo orizzontalmente poichè non abbiamo aggiunto il calcolo per le _y.
Prima di farlo, comprimiamo il codice e sbarazziamoci delle variabili in eccesso.

Sicuramente potrete capire da soli i cambiamenti:

onClipEvent(load){
_x=0;
_y=200;
}
onClipEvent(mouseDown){
targetx=_root._xmouse;
}
onClipEvent(enterFrame){
_x+=(targetx-_x)/2;
}

Ora, in una sola linea di action, _x+=(targetx-_x)/2; , noi calcoliamo la distanza, la dividiamo di 2 e la addizioniamo a _x.

Se fin qui è tutto chiaro, possiamo aggiungere il calcolo per le _y.
Non dimenticate targety nel primo blocco di codice:

onClipEvent(load){
_x=0;
_y=0;
}
onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}
onClipEvent(enterFrame){
_x+=(targetx-_x)/2;
_y+=(targety-_y)/2;
}

Noterete che ora l'oggetto si ferma esattamente dove avete cliccato col mouse.
Abbastanza preciso, ma non è ancora finita.

Ogni volta che vedo un numero in una actionscript, come il "2" nel nostro caso, mi infastidisco.
Io preferisco rimpiazzarli con delle variabili, specialmente se poi si decide di cambiare il valore ad un certo punto (che è poi quello che faremo).

Questo è il codice finale che useremo:

onClipEvent(load){
_x=0;
_y=0;
speed=2;
}
onClipEvent(mouseDown){
targetx=_root._xmouse;
targety=_root._ymouse;
}
onClipEvent(enterFrame){
_x+=(targetx-_x)/speed;
_y+=(targety-_y)/speed;
}

Ora, la cosa più ovvia è giocare un po' con la variabile speed.
Se le date come valore 1 vedrete che il movimento sarà lo stesso della prima formula, l'oggetto si sposterà istantaneamente dove avete cliccato.
Più alto sarà il valore della variabile più lento sarà il movimento fino al punto finale.

Se mettiamo speed=10 , l'oggetto percorrerà solo un decimo alla volta della distanza effettiva da percorrere, poi ancora 1/10 della distanza rimanente e così via, quindi ci metterà molto più tempo ad arrivare a destinazione.
Potete provare voi a modificare la velocità per trovare l'effetto desiderato.

A questo punto un ultimo bonus.
Provate a settare speed con un valore decimale tra 0.5 e 1.0 .
Io ho provato che 0.6 dà un effetto molto interessante, crea un movimento con rimbalzo elastico molto carino.
Se dividete per un numero minore di 1 l'oggetto si muoverà di più della distanza effettiva, superando il punto finale e poi tornando indietro, risuperando il punto di destinazione, ma stavolta non di tanto quanto prima, avvicinandosi sempre di più fino a che sarà virtualmente fermo.

 

Questo è tutto per quel che riguarda l'easing.
Attualmente ci sono molte formule più complesse che possono essere usate, basate su differenti funzioni matematiche, ma penso che questa, che è anche la più semplice, possa coprire il 99% dei casi.
Come l'avete usata per il movimento, provate ora ad implementarla con altre proprietà dei movieclips: _rotation, _alpha, scale ecc..

Per finire ecco la formula generica che potrete facilmente memorizzare:

PassoSuccessivo=(DoveVoleteArrivare-DoveSieteAdesso)/Velocità;

Che di solito si traduce in:

proprietà=(target-proprietà)/velocità;



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Condividi le tue opinioni su questo articolo!