Entradas con la etiqueta ‘tween’

JS – Hacer una Transición de un Valor Numérico

Publicado por Iván Gajate el 17 de septiembre de 2014 en JavaScript | Los comentarios están cerrados.

Hay una forma muy sencilla de hacer una interpolación entre dos valores numéricos. Un tween de un valor, como si lo hiciésemos de una posición o de la anchura de un objeto pero de un valor numérico.
Yo esto lo suelo usar para cambiar el volumen de un sonido.
Tan solo hay que envolver el valor que queramos interpolar en un objeto y hacer un tween con TweenMax como siempre:

var obj = {value:0};
TweenMax.to(obj, 1, {value:3, ease:Linear.easeNone, onUpdate:onUpdate});
function onUpdate() {
	console.log(obj.value);
}

En este ejemplo hago un tween desde 0 hasta 3 en 1 segundo.
Devolvería esto:

0
0.126
0.33
0.396
0.42000000000000004
0.471
0.522
0.573
0.6180000000000001
0.672
0.7230000000000001
0.771
0.8219999999999998
0.8699999999999999
0.9239999999999999
0.9719999999999999
1.023
1.071
1.1219999999999999
1.17
1.224
1.272
1.323
1.371
1.4249999999999998
1.4729999999999999
1.524
1.572
1.6230000000000002
1.674
1.722
1.7759999999999998
1.8239999999999998
1.875
1.9260000000000002
2.022
2.073
2.127
2.175
2.226
2.277
2.325
2.376
2.4269999999999996
2.4779999999999998
2.526
2.577
2.628
2.676
2.7270000000000003
2.775
2.8289999999999997
2.877
2.928
2.979

AS3 – Hacer un Tween de un Punto.

Publicado por Iván Gajate el 29 de octubre de 2010 en AS3, Flash, Lab | 9 comentarios »

Normalmente hacemos un tween de un MovieClip, cambiando sus propiedades x, y, alpha… pero se puede hacer un tween sobre cualquier propiedad numérica de cualquier objeto, como por ejemplo del objeto Point.

var p1:Point = new Point(0, 0);

TweenLite.to(p1, 1.5, {x:200, y:300});

Con esto, podríamos dibujar un paralelogramo que apareciese con un efecto mas interesante que un simple escalado.

Hacer clic sobre la imagen para refrescar:

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

Calculamos la posición de cada uno de sus vértices, con un efecto de rebote. Mientras se ejecuta redibujamos la figura con la API de dibujo de Flash.

Si ese mismo clip lo usamos para enmascarar una foto, el efecto es mejor:

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

Lo mejor es que si esa foto tiene algún filtro, como una sombra o un iluminado interior, el efecto se va adaptando a la nueva forma de la máscara.

Descargar Ejemplo

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 | 23 comentarios »

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

Leer el resto de esta entrada

TweenMax. El hermano mayor del TweenLite

Publicado por Iván Gajate el 21 de diciembre de 2008 en AS2, AS3, Flash, Tutoriales | 3 comentarios »

Ya había hablado antes del TweenLite, una librería para hacer tweens de forma súper sencilla a la que estoy totalmente enganchado. Lo hago todo con ella.

Si se nos queda corta, podemos utilizar el TweenMax, que es exactamente igual, pero con más propiedades. Se basa en el primero, y añade cosas como la posibilidad de hacer tweens sobre filtros, movimientos con curvas Bezier, pausar un tween o hacerle un loop, así como acceder a muchas propiedades internas del tween.

Aquí se pueden ver los tweens con filtros sobre una imagen:

Como se basa en el TweenLite, sólo voy a poner las cosas que tiene diferente a éste:

Leer el resto de esta entrada

TweenLite. Tween sencillo, ligero y potente

Publicado por Iván Gajate el 22 de octubre de 2008 en AS2, AS3, Flash, Tutoriales | 19 comentarios »

Llevaba tiempo queriendo probar esta librería para hacer Tweens, dicen que el rendimiento es increíblemente bueno y es muy sencilla de usar. Y en tan solo 3KB!

Hay muchas librerías de tweens, como Tweener, Zigo o las propias de Flash. Yo he probado algunas pero no termina de convencerme ninguna. La de Flash era la que usaba hasta ahora, pues las otras me habían dado problemas anteriormente, pero se queda corta algunas veces.

La TweenLite me ha sorprendido por lo fácil que es de usar, y tiene todo lo que siempre he necesitado en un Tween y alguna característica que no me esperaba.

Nota: Un Tween es una forma de animar objetos mediante programación. Es muy útil cuando no conoces el punto inicial de la animación.

Vamos a hacer un movimiento sencillo, una bola moviéndose de izquierda a derecha con movimiento elástico.

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

Leer el resto de esta entrada