Tween de un valor y parámetros de las ecuaciones de easing

Publicado por Iván Gajate el 4 de noviembre de 2009 en AS2, AS3, Flash, Lab

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:

quad-ease

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]});

 

23 comentarios para “Tween de un valor y parámetros de las ecuaciones de easing”

  1. saben si eso es muy bueno!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  2. Còmo uso tween para crear balance progresivo de un sonido externo?.

    Tengo un player de radio online acà, pero hace el cambio de posicion del canal de sonido repentinamente, busco la forma de hacerlo progresivo, pero no entiendo un pio sobre tween…apenas lo he bajado y no se por donde comenzar.

    Si alguien puede y quiere ayudarme por favor contactarme (messenger) acà!:

    zegabriel3@hotmail.com

  3. He puesto un ejemplo para que se entienda mejor.
    Si uso las ecuaciones de easing, puedo dibujar movimientos curvos, no solo rectos. Y utilizarlos para cualquier tipo de animación.
    Suelo utilizar este recurso cuando tengo que colocar objetos según una puntuación, pero quiero que los primeros se separen más del resto que los últimos. Así se acentúan las diferencias entre jugadores.
    Podría servir también para representar una carrera ciclista donde queremos que el pelotón esté estirado hacia atrás, pero de forma uniforme.
    Espero que ahora se entienda mejor.

  4. Oye que bueno es eso. Lo había leído en su dia, pero no le había dado importancia.
    A ver si me curro un ejemplo para el post que se ha quedado soso ;D

  5. Pensaba que era algo parecido a ésto:
    http://blog.greensock.com/timelinemax
    Debo ser yo el que no te ha entendido bien 🙁
    Gracias por la aclaración

  6. Hola Jose
    no es que no se pueda, es que son cosas distintas: con el TweenMax o con cualquier otro haces una transición de un valor A a otro B en un tiempo concreto, por ejemplo un segundo. Lo que yo necesito es una ecuación que me devuelva un valor “suavizado”, pero soy yo el que en cada enterFrame le pregunto por ese valor y se lo aplico a lo que yo quiera. No es una animación, no tiene fin.
    Es que no se si he explicado bien la utilidad de estas ecuaciones 😀

  7. ¿No se puede hacer algo así con la nueva versión de TweenMax? (TweenGroup…).