Suave Animación Web con Velocity.js

() translation by (you can also view the original English article)

La animación, cuando es aplicada cuidadosamente, puede mejorar la interfaz de un sitio web y, en última instancia, la experiencia del usuario en un sitio web. En este tutorial, vamos a examinar VelocityJS, un motor de animación para rendimiento más rápido en las animaciones. VelocityJS se ha convertido en uno de mis preferidos cuando estoy tratando con animaciones para la web, la razón es, en mi opinión:

Es, simplemente, bastante mejor. VelocityJS es tan rápido como CSS y proporciona un resultado mejor que su contraparte jQuery, particularmente en dispositivos móviles. Este rendimiento es mucho mejor que hubo, incluso, una discusión para reemplazar el núcleo de las animaciones que es jQuery con VelocityJS, que al final, por desgracia, no ocurrió. Las animaciones CSS, aunque son rápidas, están limitadas en términos de soporte a través de los navegadores. ¡VelocityJS es seguro hasta con las versiones que están antes de IE8!
RunSequence FTW. RunSequence es un método en VelocityJS que podemos usar para realizar un montón de animaciones de manera consecutiva. Es un enfoque más elegante que las funciones de concatenación de animaciones, como en jQuery. Haciendo esto únicamente con CSS no es practico.
Curva de Aprendizaje Esencial. VelocityJS proporciona una sintaxis similar a jQuery. Esto nos permite pasar de jQuery a VelocityJS y comprender la API rápidamente.

En este tutorial, pasaremos por lo esencial hasta realizar animaciones con VelocityJS. Además, vamos a destacar algunas funciones que podrían mejorar nuestro Diseño de Interfaz. Por lo tanto, ¡vamos a empezar!

Realizando Animaciones Básicas

Con jQuery, asumiendo que nos gustaría deslizar un div a la derecha, escribiríamos algo como:

$("div").animate({
  left: "500px",
}, {
	duration: 3000, 
	easing: "linear" 
});

En casi exactamente la misma forma que lo escribiríamos esto con VelocityJS:

$("div").velocity({
	left: "500px",
}, {
	duration: 3000, 
	easing: "linear"
});  

Ambos ejemplos moverán el div por 500px hacia la derecha por tres segundo observando la propiedad left del elemento. La diferencia visible en la sintaxis es el método que se usa para animar el elemento, VelocityJS usa .velocity() en vez de .animate() de jQuery.

Asimismo, puede notar la discrepancia en el rendimiento. Las animaciones jQuery algunas veces dan la sensación de ser inestables, mientras que VelocityJS funciona mejor desde el principio hasta el final. Deberíamos intentarlo:

Animando Diferentes propiedades CSS

VelocityJS acepta una cantidad de propiedades CSS así como también sus extensa versión para manipular elementos. Podemos usar éstas propiedades en conjunto en un sola instancia de VelocityJS para realizar animaciones sofisticadas. Por ejemplo:

$("div").velocity({
  borderRadius: "25px",
  width: "45px",
  paddingLeft: "0",
  paddingRight: "0",
  backgroundColor: "#8CC152",
  color: "#fff",
  borderColor: "#8CC152",
  boxShadowX: "0",
  boxShadowY: "0"
}, {
	duration: 350,
	easing: "easeInQuad"
});

En este segundo ejemplo, hemos tratado el div con varias propiedades CSS, incluyen width para hacerlo más pequeño, background-color, padding, box-shadow y border-radius para transformarlo en un círculo.

Observe que las propiedades incluyen dos o más palabras que están formateadas en formato camelCase, siguiendo la convención de JavaSript, por lo tanto, border-radius se convierte en borderRadius y así sucesivamente. También, aceleramos la duración a tan solo 350 milisegundos y, este tiempo, optamos por easeInQuad mientras que VelocityJS tiene a jQuery usando la interfaz de diseño easing.

Atajos de animación

jQuery ofrece algunos métodos para realizar animaciones muy comunes tales como; .slideUp() y .fadeOut(), que hace que los elementos desaparezcan de forma gradual. Así que tiene que sorprendernos que VelocityJS también lo haga. VelocityJS proporciona algunos atajos para pasar una instancia .VelocityJS().

Escribiríamos lo siguiente para deslizar un elemento para ocultar el contenido:

1	$("div").velocity("slideUp", {
2	duration: 350
3	});

Para aparecer o desaparecer gradualmente, escribiríamos:

1	$("div").velocity("fadeOut", {
2	duration: 350
3	});

Desplazarse

VelocityJS, también proporciona un atajo llamado scroll que podría resultar útil para crear enlaces que lleven a una sección en particular sobre la página. El siguiente código asume que queremos el enlace, #go-up para desplazarse de regreso hacia la parte superior de la página cuando se haga clic sobre él.

var $up = $("#go-up");

$up.on("click", function() {
  $("body").velocity("scroll", { 
    duration: 2000,
    easing: "easeInBack"
  });
});

Aquí está como podría lucir este:

Reverse

Otro atajo que resulta útil incluir en la forma de reverse. Este atajo nos permite revertir el elemento devuelta a su posición inicial una vez que la animación está completa. Tomando el ejemplo anterior de scrolling, podemos aplicar reverse para mejorar los iconos de flecha. Para hacer esto, encadenamos una nueva instancia VeloctiyJS con reverse añadido, configurando la opción loop a true.

$(".icon").velocity({
  translateY: "10px"
}, {
  loop: true
}).velocity("reverse");

Esto moverá el icono 10px luego, inmediatamente lo regresará a su posición inicial. Como también hemos ajustado la opción loop a true, la animación se realizará indefinidamente.

Plugin: UI Pack

Más efectos de animación están disponibles en UI Pack. El UI Pack está disponible como un plugin, separado de la base de VelocityJS. Una vez que usted lo ha incluido, usted tendrá acceso a un conjunto de efectos más allá de slideUp, fadeOut y scroll, destapando, incluso, un potencial más grande para construir interfaces animadas.

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/VelocityJS/1.2.2/VelocityJS.ui.js"></script>

UI Pack, también trae dos nuevas opciones: stagger y drag. El stagger nos permite realizar un solo efecto, aplicado a un conjunto de elementos consecuentemente en lugar de simultáneamente. La opción drag, cuando se ajusta a true, da una sensación de arrastre para el último elemento en el conjunto.

Como un ejemplo, he creado una barra de navegación con algunos menús, uno de los cuales tiene un sub-menú. Para hacer el sub-menú más atractivo, he aplicado dos efectos de UI Pack con al opción stagger ajustada.

Múltiples Animaciones Consecutivamente

En algún punto, podemos necesitar realizar animaciones en diferentes elementos en secuencia. Para hacer eso,tenemos que anidar cada instancia de VelocityJS en orden, por ejemplo:

$("#offcanvas").velocity({ 
		translateX: 0
	}, {
		duration: 300,
	}, function() {
	$(".widgets").VelocityJS({
		translateX: 0,
		opacity: 0
	}, {
		duration: 300,
	}, function() {
		$("#close").VelocityJS({
			translateY: 0,
    	rotateZ: 0
		}, {
			duration: 150
		});
  });
});

La función de arriba primero realizará la animación de #body luego la de #nav una vez que éste está completo y, por último, el #menu. Lamentablemente, esto no es para nada elegante ni ideal. Si usted tienen docenas de animación, el código será impráctico para controlar.

Sin embargo, además de los efectos de animación, el UI Pack viene con un método llamado RunSequence. Éste está diseñado precisamente para resolver nuestro problema de secuencia, para casi un montón de animaciones y ejecutarlas en su orden relevante. Al tomar el código de arriba, podríamos volver a escribir un objeto JavaScript con el elemento seleccionado definido dentro de una propiedad e, las propiedades CSS registradas en una propiedad p, mientras que las opciones de animación están ajustadas en la propiedad o.

var animationSequence = [
	{ e: $("#offcanvas"), p: { translateX: 0 } , o: duration: 300 },
	{ e: $(".widget"), p: { translateX: 0, opacity: 0 } , o: duration: 300 },
	{ e: $("#close"), p: { translateY: 0, rotateZ: 0 } , o: duration: 150 }
];
 $.Velocity.RunSequence(animationSequence);

He extendido el código de arriba a una función fuera de la composición. Inténtelo y revise la etiqueta JavaScript para ver el código fuente por completo.

Conclusiones

Encontré que VelocityJS puede ser una alternativa preferible a las animaciones jQuery y CSS, particularmente cuando surge la construcción de interfaces interactivas que involucran múltiples animaciones. VelocityJS es fácil de usar, empacada con animaciones pre-construidas y, por encima de todo, es rápido. Úselo con responsabilidad. Como a menudo digo: con grandes funciones vienen grandes responsabilidades.