Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Animaciones SVG para todos

Animaciones SVG para todos 12.NOV.14

Alvaro José Rios Ch
Fundador WebBizarro

Hay muchas formas nuevas de crear sitios web llamativos y hace mucho tiempo que no escuchamos hablar de flash para lograr resultados increíbles, el uso de gráficos SVG ofrece increíbles resultados para los sitios web ya que son ligeros y se pueden manipular de muchas formas y hoy les vengo a mostrar como crear animaciones que le dan una nueva vida a estas imágenes.

Vivus es una pequeña librería que te permite crear animaciones en gráficos SVG, el como lo hace es muy sencillo. El script usa la propiedad strokeDashoffset de CSS, con ella se define el trazo de cada línea del objeto SVG, así que manipulando esta propiedad poco a poco puede crearse una animación donde todo el objeto SVG se dibuje línea a línea que en realidad da un muy buen efecto, sobretodo ahora que la tendencia de diseño web es tan flat.

Sin embargo hay un problema y es que esta propiedad esta solo definida en los elementos de tipo path, pero hay muchos otros tipos de objetos que se pueden crear con SVG circulos, rectangulos, líneas que no la poseen. Para este tipo de elementos es necesario usar otra clase llamada pathformer que se encarga de convertir estos elementos a objetos tipo path para así poder usar las animaciones.

Es muy fácil de usar solo una línea de código es necesaria para hacer la animación.

new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);

En la primera parte se indica el id del objeto SVG o el elemento en el DOM, la segunda son las opciones donde se determina el tipo de animación, duración, como se inicia la animación (automáticamente, manualmente o cuando el SVG este en el Viewport), el retraso de la animación y si removerá todos los estilos extras sobre el SVG y lo dejara como es original al final de la animación. Finalmente el último parámetro es la función de callback para cuando se termine la ejecución.

Una herramienta muy útil para hacer animaciones sencillas pero con mucho impacto.