Entradas con la etiqueta ‘animar’

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

JS – Animar elementos con WOW

Publicado por Iván Gajate el 4 de julio de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

WOW es una librería JavaScript que sirve para hacer que ciertas partes de nuestro site vayan apareciendo según hacemos scroll. Es un efecto muy simple pero da un aspecto mucho mas dinámico a nuestro site con muy poco esfuerzo. Basta con poner una clase al elemento que queramos desvelar 🙂

https://github.com/matthieua/WOW

Un ejemplo con las animaciones que puede hacer http://mynameismatthieu.com/WOW/

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