Entradas con la etiqueta ‘animacion’

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

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

Suavizado de letra Personalizado

Publicado por Iván Gajate el 7 de abril de 2009 en AS2, AS3, Flash, Tutoriales | 2 comentarios »

Hoy me ha tocado pegarme con los distintos suavizado de un campo de texto, pues tenía una animación que iba a trompicones, y el suavizado para animación me destrozaba la tipo. Normalmente cuando es un texto animado uso el Suavizado para animación y cuando es un texto que no se mueve el Suavizado para Legibilidad y obtengo buenos resultados, pero existe uno en el que puedo modificar los valores de grosor y nitidez de la fuente, el Suavizado Personalizado.

Me he hecho una utilidad para ver los resultados rápidamente, y sobre todo para ver la repercusión en un texto animado.

El Eje X modifica el Grosor, y el eje Y la Nitidez. He ampliado el campo de texto para que se vea mejor el cambio.

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

Descargar ejemplo Suavizado Personalizado