En la actualidad estamos más que acostumbrados a los diferentes tipos de animación en las páginas Web y Apps que utilizamos en nuestro día a día. En algunos casos sirven a un propósito más estético, mientras que en otras ocasiones la animación está tan completamente integrada dentro de la experiencia de usuario que forma una unidad inseparable junto al contenido y la información.

Cuando esto ocurre, somos capaces de conocer el resultado de nuestras acciones sin necesidad de interpretar mensajes, basta con unos patrones de movimientos definidos y consistentes.

Por lo tanto, la animación, como método para guiar al usuario, se ha vuelto imprescindible. En esta necesidad radica la importancia de conocer herramientas como Velocity.js, ya que nos permite la creación y aplicación de animaciones y patrones de movimiento en nuestras aplicaciones Web, de forma sencilla.

¿Qué es Velocity.js?

Velocity.js es un motor de animaciones creado por Julian Shapiro, no dependiente de jQuery, y que supera en funcionalidades y rendimiento a los dos métodos principales de animación en los entornos Web:

  1. jQuery $.animate().
  2. Animación CSS.

Velocity.js permite el encadenamiento de animación (como luego veremos) y muchas otras opciones que facilitan el trabajo de creación de layouts y experiencias de usuario. Como dice en su propia Web:

Velocity.js es lo mejor de jQuery, jQuery UI y las transiciones CSS, combinado.

Si estás preocupado por la compatibilidad, Velocity.js funciona en todos los navegadores hasta IE8 (donde, si usamos jQuery, se degrada perfectamente con fadeIn/Out) y Android 2.3. Además su peso es mínimo, unos 9Kb comprimida en zip.

Sintaxis básica

La forma más sencilla de utilizar Velocity.js es a través de un objeto simple con las propiedades que queremos animar y sus valores:

// Con jQuery
$('#elemento').velocity({
    properties: {width: "500px"}, // <- Propiedades a animar y el valor deseado
    options: {duration: 1000} // <- Segundo objeto opcional con opciones
});

// Sin jQuery.
Velocity(document.getElementById('elemento'), { width: "500px" }, { duration: 1000 });

// Las opciones por defecto que provee Velocity.js
duration: 400,  
easing: "swing",  
queue: "",  
begin: null,  
progress: null,  
complete: null,  
loop: false,  
delay: false,Hrpw0#97  
display: false,  
mobileHA: true

Más información en su Web: http://julian.com/research/velocity/#arguments

Opciones

Este artículo es una pequeña introducción a Velocity.js, por lo que no vamos a entrar en detalle en sus opciones. Eso sí, recomiendo encarecidamente que les echéis un vistazo en su página Web http://julian.com/research/velocity/#duration

Encadenamiento

El encadenamiento (chaining) es una de las principales virtudes de Velocity.js. Cuando hay más de una llamada a Velocity en un elemento (o varios), éstas se van sucediendo a medida que las anteriores van finalizando. Imaginaros la potencia de esto:

See the Pen Velocity.js – Chaining by Juan Andres Núñez Charro (@juanwmedia) on CodePen.

Más información en su Web: http://julian.com/research/velocity/#chaining

UI Pack

En apenas 3Kb (zip) este pack añade efectos para interfaz de usuario de forma muy sencilla, continuando con la filosofía de Velocity.js.

Los efectos están organizados en dos categorías: callouts y transiciones.

Callouts

Los callouts son efectos cuyo objetivo es atraer la atención del usuario e informarle sobre el resultado de sus acciones, el estado de la aplicación o de las siguientes acciones que debe realizar. Esto mejora sobremanera la experiencia del usuario.

See the Pen Velocity.js – Callout by Juan Andres Núñez Charro (@juanwmedia) on CodePen.

En el ejemplo hemos utilizado el callout.shake, pero hay más: bounce, flash, tada, swing, pulse…. Es recomendable que le echéis un vistazo a la documentación oficial.

Transiciones

Con las transiciones logramos que los elementos aparezcan in y desaparezcan out de nuestro interfaz, enriqueciendo la experiencia visual. En este ejemplo sencillo vamos a utilizar transition.bounceRightIn encadenada con transition.bounceRightOut:

See the Pen Velocity.js – Transitions by Juan Andres Núñez Charro (@juanwmedia) on CodePen.

Recuerda que de la misma forma también es posible encadenar callouts con transitions:

$('#elemento')
    .velocity("callout.shake", 2000)
    .velocity("transition.slideDownOut");

Más información en su Web: http://julian.com/research/velocity/#uiPack

Opciones de UI Pack

Las opciones que ofrece el pack UI de Velocity.js son stagger, drag y backwards.

Stagger

Traducido al castellano sería tambaleo. En esencia lo que permite esta opción es que las animaciones sobre los diferentes elementos de una misma llamada en Velocity no ocurran en paralelo, sino con un retraso especificado en milisegundos.

See the Pen Velocity.js – UI Pack – Stagger by Juan Andres Núñez Charro (@juanwmedia) on CodePen.

Drag

Sería la resistencia en arrastre de los elementos animados. Configurándolo como true, incrementa la duración de la animación en cada elemento. La animación del último elemento tendrá la duración original especificada en la llamada de Velocity, mientras que las animaciones de los elementos anteriores tendrán una duración aproximada a la original. Esto resulta en un efecto de easing visualmente muy agradable.

See the Pen Velocity.js – UI Pack – Drag by Juan Andres Núñez Charro (@juanwmedia) on CodePen.

Backwards

Viene a significar hacia atrás. Configurando backwards como true obtenemos una animación que comienza por el último elemento (a diferencia de la funcionalidad por defecto, forward) del set. La opción backwards es ideal para extraer elementos del campo de visión de forma consistente a la vez que elegante.

See the Pen Velocity.js – UI Pack – Backwards by Juan Andres Núñez Charro (@juanwmedia) on CodePen.

Conclusión

Velocity.js se sitúa como la primera opción por su compatibilidad, buena documentación, velocidad de respuesta y sencillez de uso.

En este artículo apenas hemos tocado la superficie de lo que se puede realizar con Velicity.js, aunque tampoco era el objetivo del mismo. Más bien, lo que he pretendido es ofrecer un punto de partida, una aproximación muy sencilla para que cualquier desarrollador (e incluso diseñador) front-end pueda aplicar animaciones y patrones de movimiento a sus aplicaciones Web. Si es esto lo que estás buscando, Velocity.js se sitúa como la primera opción por su compatibilidad, buena documentación, velocidad de respuesta y sencillez de uso.

Referencias