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.
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]});
19 de mayo de 2010 a las 23:36
saben si eso es muy bueno!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
23 de enero de 2010 a las 4:26
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
5 de noviembre de 2009 a las 1:03
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 de noviembre de 2009 a las 16:45
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
4 de noviembre de 2009 a las 15:27
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
4 de noviembre de 2009 a las 14:28
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 😀
4 de noviembre de 2009 a las 14:17
¿No se puede hacer algo así con la nueva versión de TweenMax? (TweenGroup…).