¿Y por qué no? - Programación JavaScript y ActionScript

Todos conocemos los tweens como el TweenLite por ejemplo, que sirven para animar objetos de forma “suave” en un intervalo de tiempo dado.

Pero si queremos mover un objeto constantemente, los tweens no nos valen, pues no hay un intevalo de tiempo definido. Para hacer esto podemos usar las funciones en las que se basan todos los tweens, las de Robert Penner.

(Archivo Flash, para verlo necesitas Adobe Flash Player.)

Descargar ejemplo Movimiento Curvo

// mover se ejecuta cada vez que muevo el deslizador
function mover(e:SliderEvent):void{
	// La bola azul sigue un movimiento lineal, su "x" es igual que su "y"
	bolaAzul.x = deslizador.value;
	bolaAzul.y = deslizador.value;

	// Utilizo la ecuacion Circular para el movimiento en el eje "y" de la bolaRoja
	// El valor del deslizador es el valor cambiante de la ecuacion.
	bolaRoja.x = deslizador.value;
	bolaRoja.y = Circular.easeOut(deslizador.value, 0, recorrido, recorrido);
}

En este caso la bola azul sigue un movimiento lineal, su x = y

En cambio la bola roja, sigue un movimiento curvo, donde su y es el valor “transformado” por la ecuación Circular.easeOut

Las ecuaciones tienen un aspecto tal que así:

function easeOut(t:Number, b:Number, c:Number, d:Number):Number {
	return -c *(t/=d)*(t-2) + b;
}

Son básicamente unas funciones que esperan 4 parámetros y devuelven un número. Estos parámetros son:

• t: Valor actual. Es el número que va cambiando.
• b: Valor inicial del intervalo.
• c: Intervalo. El valor final menos el valor inicial.
• d: Duración. El número de pasos en el que queremos recorrer nuestro intervalo.

Un ejemplo:

Quad.easeOut(5, 300, 400, 10) //600

Sería como pedirle: “Del 300 al 700 (300+400), en 10 pasos, y devuélveme el 5º”

Todos los valores intermedios serían así:

Quad.easeOut(0, 300, 400, 10) // 300
Quad.easeOut(1, 300, 400, 10) // 376
Quad.easeOut(2, 300, 400, 10) // 444
Quad.easeOut(3, 300, 400, 10) // 504
Quad.easeOut(4, 300, 400, 10) // 556
Quad.easeOut(5, 300, 400, 10) // 600
Quad.easeOut(6, 300, 400, 10) // 636
Quad.easeOut(7, 300, 400, 10) // 664
Quad.easeOut(8, 300, 400, 10) // 684
Quad.easeOut(9, 300, 400, 10) // 696
Quad.easeOut(10, 300, 400, 10) // 700

Si nos fijamos, los valores no aumentan linealmente, sino con esta forma:

Primero aumentan lentamente y al final lo hacen de forma más brusca.

Esta curva la uso habitualmente cuando quiero distribuir elementos por el escenario de forma consecutiva, pero no lineal. Les ajusto la x aumentando progresivamente en un bucle, y la y la calculo con una ecuación de easing.

O por ejemplo para aumentar progresivamente la velocidad de un objeto, o el volumen de un sonido…

Hay un par de curvas con parámetros extra como son Back y Elastic.

Back: Es el típico “cojo carrerilla” 😀

• t: Valor actual. Es el número que va cambiando.
• b: Valor inicial del intervalo.
• c: Intervalo. El valor final menos el valor inicial.
• d: Duración. El número de pasos en el que queremos recorrer nuestro intervalo.
• s: Valor que indica la cantidad que se excede. El valor por defecto es 1.70158, lo que equivale a un 10% del recorrido total. Un valor de s=0 equivale a un Cubic normal.

Elastic: Hace un movimiento de vaivén, como si fuese una goma.

• t: Valor actual. Es el número que va cambiando.
• b: Valor inicial del intervalo.
• c: Intervalo. El valor final menos el valor inicial.
• d: Duración. El número de pasos en el que queremos recorrer nuestro intervalo.
• a: Amplitud del seno. El valor por defecto es 0. No veo muy bien la relación directa de este valor, pero se que está relacionado con el intervalo (c).
• p: Periodo del seno. El valor por defecto es 0.

Estos valores “extra” son útiles conocerlos también para hacer un Tween con el parámetro easeParams, en el caso de Back si queremos que haga un rebote menos pronunciado sería:

TweenLite.to(miClip, 0.6, {y:500, ease:Back.easeOut, easeParams:[0.8]});