jQuery / Control refinado de las animaciones

Bienvenidos sean a este post, hoy veremos solo un poco mas de teoria.

Si vienen siguiendo este curso desde antes de los ultimos posts habran notado la gran variedad de animaciones pero aun pueden ofrecer muchas mas, desde la version 1.8 que se reescribio este modulo de jQuery y se introdujeron algunas mejoras para favorecer a los desarrolladore para que puedan hacer ajustes refinados sobre estos e incluso cambio sobre el engine encargado de estos.

Si bien hemos visto algunos disponibles como duration y easing, el metodo animate nos provee algunas opciones que nos permiten inspeccionar y modificar una animacion, les paso dos opciones:

• step, esta funcion es llamadda cada 13ms por cada propiedad durante la animacion, esto nos permite definir las propiedades del objeto de interpolacion, como el valor final, el tipo de aceleracion o la propiedad real que se anima en funcion del valor actual de una propiedad a traves del argumento pasado
• progress, este es llamado varias veces durantte el ciclo de vida de la animacion, a diferencia de step que es llamado una sola vez por elemento en cada paso, sin importar la cantidad de propiedades sean animadas, entre los que actua esta el objeto de promise de la animacion y el numero de ms restantes en la animacion

Les paso un ejemplo de como se aplica:

$('#undiv').animate({
	height: '200px',
	width: '400px'
}. {
	step: function(now, tween) {
		// monitorea el ancho y alto
		// ajusta la interpolacion
	},
	progress: function(animacion, progreso, restante) {}
});

Se aplica como todas las propiedades que estuvimos trabajando hasta ahora pero con funciones para aplicar lo que sea necesario pero en realidad todas las animaciones de jQuery utilizan a setTimeout para llamar repetidamente funciones cada 13ms, de manera predeterminada, y cambiar las propiedades de estilo en cada marca.

Aunque algunos navegadores modernos proveen una nueva funcion llamada requestAnimationFrame que tiene ventajas sobre setTimeout ente las cuales podemos destacar una mejor precision lo cual permite una animacion mas suave o la mejora del consumo de baterias en los dispositivos moviles, una particularidad de setTimeout es que siempre corre cuando esta en una pestaña del navegador siendo que este activa o no, en cambio requestAnimationFrame se pausa mientras no este activa la pagina lo cual ocasiona el ahorro de energia, esto hizo que el lider encargado de la seccion de animacion, Corey Frang, creara un plug-in que reemplaza a setTimeout con requestAnimationFrame cuando esta disponible.

Este plug-in modifica dos metodos del objeto $.fx, timer y stop, si bien este plug-in ya se encuentra de forma nativa a partir de la version 3.0.0, siempre que este disponible, pero para versiones mas viejas pueden descargarlo desde:

https://github.com/gnarf/jquery-requestAnimationFrame

Aunque el enfoque de requestAnimationFrame puede ser mucho mas atractivo que el de setTimeout este tiene un detalle y es su potencial conflicto cuando los dos son usados en el mismo codigo, por esta razon esta disponible pero no se implementa para reemplazar a setTimeout.

Para ir finalizando hablemos sobre los niveles mas bajos de la animacion de jQuery donde encontraremos las funciones $.Animation y $.Tween, estas funciones y sus correspondientes objetos pueden ser usados para manipular cada aspecto de una animacion, por ejemplo podemos usar a $.Animation para crear un prefiltro de animacion (prefilter), este prefiltro puede tomar una accion particular al final de la animacion basado en la existencia de una propiedad pasada al objeto options en el metodo animate, veamos un caso:

$.Animation.prefilter(function(element, properties, options) {
	if (options.removeAfter) {
		this.done(function() {
			$(element).remove();
		});
	}
});

Cuando este codigo este en su lugar simplemente con hacer un llamado de esta manera:

$('#my-div').fadeOut({removeAfter: true});

Esto removera automaticamente el div del DOM una vez finalizado el fadeOut, con esto hemos visto una forma de como controlar nuestras animaciones de una forma un poco mas detallada.

En resumen,, hoy hemos visto un poco de teoria sobre como podemos controlar unu poco mejor las animaciones y algunas otras curiosidades extras, espero les haya resultado util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.