5 Librerías De JavaScript Para Animar SVG

SVG es una resolución independiente de gráficos. Esto significa que la imagen se verá bien en cualquier tipo de pantalla sin sufrir ninguna pérdida de calidad. Más allá de eso, también puedes hacer que las imágenes SVG puedan tener algunos efectos de animación.

Anteriormente hemos compartido algunos artículos donde hablamos sobre la animación usando animate.css, o usando Animatron para realizar animaciones. En esta oportunidad, vamos a compartir unas cuantas librerías de JavaScript para animar SVG.

1. Vivus

Vivus es una biblioteca JavaScript que le da a su SVG la apariencia de ser dibujado. Vivus funciona sin necesidad de depender de otras librerías, como jQuery. Sólo tienes que incluir el archivo .js en el código HTML, y designar el elemento SVG que deseas animar, junto con algunas opciones predeterminadas para iniciar la animación de inmediato.

Por ejemplo:

[js]new Vivus( ‘svg-element’, { type: ‘oneByOne’, duration: 200 });[/js]

Lo anterior anima el elemento SVG que tiene el ID svg-elemento en 200 milisegundos. Cada elemento de esta imagen SVG, se animará una tras otra dentro de ese periodo de tiempo.

 

2. Bonsai

Bonsai es una potente librería de JavaScript que te permite dibujar, así como animar elementos gráficos en páginas web. Es compatible tanto con HTML5 Canvas y SVG. Con Bonsai, se puede desarrollar un simple rectángulo o un círculo o si se quiere, un juego multijugador de animación, como este. Puedes usar Orbit sentir cómo funciona Bonsai en acción en vivo o echa un vistazo a un par de estos ejemplos impresionantes a inspirarse.

 

3. Velocity

Velocity es una librería JavaScript util para desarrollar animaciones rápidas. Supera a jQuery, e incluso CSS al momento de implementar animaciones rápidas en el desarrollo web. La API de Velocity funciona de forma similar a la animación en jQuery, excepto que utiliza la palabra clave alias $.velocity() en lugar de $.animate(). Aparte de eso, puedes utilizar las mismas palabras exactas de animación como fadeIn y fadeOut.

 

4. Raphael

RaphaelJS es una biblioteca que permite dibujar y animar gráficos vectoriales SVG en las páginas web. Es compatible con una amplia gama de navegadores hasta el antiguo IE6, que casi hace que Raphael sea la biblioteca de JavaScript más confiable en esta área. Con RaphaelJS, puedes crear gráficos interactivos de análisis, mapas del mundo, e interacciones de juego similar a la de Counter Strike.

 

5. Snap

SnapSVG es otra librería de JavaScript popular para la animacion SVG, la cual fue desarrolladada por Dmitry Baranovskiy, junto con Adobe Web Platform Team. A diferencia de Raphael, SnapSVG soporta únicamente los navegadores más recientes. Eso permite que la biblioteca sea significativamente menor que Raphael y por supuesto el soporte a las características SVG como el recorte y el enmascaramiento.