Una guía práctica para la animación SVG

Cualquier ingeniero front-end que se precie es consciente de los desafíos que trae consigo el ecosistema fragmentado de dispositivos. Los diferentes tamaños de pantalla, resoluciones y relaciones de aspecto dificultan la entrega de una experiencia consistente. Más aún para aquellos que quieren ofrecer una experiencia de píxeles perfectos.

Los gráficos vectoriales escalables (SVG) ayudan a resolver una parte de ese problema y lo hacen muy bien. Aunque tienen sus limitaciones, los SVG pueden ser muy útiles para ciertas ocasiones y, si cuenta con un buen equipo de diseño, también puede crear una experiencia más impactante visualmente sin sobrecargar indebidamente el navegador web ni dificultar los tiempos de carga.

Durante los últimos meses, he estado trabajando en un proyecto que hace un uso extensivo de SVG y sus capacidades de animación y efectos. En este artículo, compartiré cómo puede usar SVG y sus técnicas de animación para dar nueva vida a su trabajo de front-end web.

gráficas vectoriales escalables

SVG es un formato de imagen que se basa en XML, muy parecido a cómo funciona HTML. Define diferentes elementos para una serie de formas geométricas familiares que se pueden combinar en el marcado para producir gráficos bidimensionales.

La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) en 1999.

Todos los principales navegadores web tienen soporte de renderizado SVG desde hace un tiempo.

Dado que los gráficos SVG son documentos XML, los navegadores web proporcionan API basadas en nodos DOM que se pueden usar para interactuar con las imágenes. ¡Hablando de dar vida a las imágenes!

Rutas SVG

Si hay un elemento dominado en SVG, ese sería el elemento <path> .

El elemento de ruta es una forma básica que se puede usar para crear casi cualquier forma 2D avanzada que puedas imaginar.

El elemento funciona tomando una secuencia de comandos de dibujo. Es muy parecido al lenguaje de programación Logo de 1967, solo modernizado y diseñado para gráficos sofisticados. El elemento toma esta secuencia de comandos de dibujo a través del atributo d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Puede pensar en un lápiz virtual que dibuja en la pantalla y los comentarios de dibujo en el elemento de ruta simplemente controlan el lápiz. En el ejemplo anterior, se le indica al bolígrafo que se mueva a la posición (10, 10) ( M10 10 ), que dibuje una línea a (75, 10) ( L75 10 ), que dibuje una línea a (75, 75) L75 75 y luego cerrar el camino volviendo al punto de partida ( Z ).

Usando otros comandos de dibujo, como arcos ( A ), curvas de bezier cuadráticas ( Q ), curvas de bezier cúbicas ( C ), etc., puede crear formas y gráficos mucho más complejos en SVG.

Puede aprender mucho más sobre el elemento de ruta aquí.

Rutas SVG y CSS

“Está bien Juan, lo entiendo. Los caminos son poderosos, pero ¿cómo los animo? tu dices.

Para nuestra primera técnica, aprovecharemos dos atributos SVG: stroke-dasharray y stroke-dashoffset .

El atributo stroke-dasharray controla el patrón de guiones y espacios utilizados para trazar el trazado. Si quisiera dibujar sus líneas como un grupo de guiones y espacios en lugar de un trazo continuo de tinta, este es el atributo que usaría.

Dado que las imágenes SVG son parte del DOM del navegador web y el trazo-dasharray es un elemento de presentación, el atributo también se puede configurar mediante CSS.

De manera similar, el atributo stroke-dashoffset (que especifica qué tan lejos en el patrón de guiones para comenzar el guión) también se puede controlar usando CSS.

Estos dos atributos SVG, juntos, se pueden usar para animar rutas SVG, dando al espectador la ilusión de que las rutas se están dibujando gradualmente.

Tome esta curva de Bézier cuadrática, por ejemplo:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Para animar esta ruta como si se estuviera dibujando gradualmente y sin problemas en la pantalla, tendremos que establecer las longitudes de los guiones (y los espacios), usando el atributo stroke-dasharray, igual a la longitud de la ruta. Esto es para que la longitud de cada línea y espacio en la curva punteada sea igual a la longitud de la ruta completa.

A continuación, estableceremos el desplazamiento del guión, utilizando el atributo stroke-dashoffset, en 0. Esto hará que la ruta aparezca en la pantalla como una curva continua (básicamente estamos viendo el primer guión, y ya hicimos que cada guión abarque todo el longitud de la curva). Al establecer el desplazamiento del guión igual a la longitud de la curva, terminaremos con una curva invisible (ahora estamos viendo la curva representada como un espacio completo, la parte que sigue inmediatamente a un guión).

Ahora, al animar la propiedad stroke-dashoffset, puede hacer que la curva aparezca en la pantalla gradualmente.

Vea las rutas de Pen Toptal - SVG y CSS por Toptal Blog (@toptalblog) en CodePen.

Como puedes ver, la curva siempre está ahí. Solo estamos cambiando el desplazamiento del guión para que la parte punteada aparezca poco a poco.

Puede llevar esto un paso más allá usando el mismo principio pero con más caminos:

Vea las rutas de Pen Toptal - SVG y CSS por Toptal Blog (@toptalblog) en CodePen.

Aquí tienes una curva negra que está fija, una roja que se mueve a lo largo del camino y otra negra siguiendo a la roja pero 40 px por detrás.

Stroke-dasharray y stroke-dashoffset son dos atributos muy poderosos que se pueden usar para aplicar una gran cantidad de animaciones y efectos a sus rutas SVG. Puede probar esta práctica herramienta que puede usar para experimentar con los dos atributos.

Animación de objetos a lo largo de rutas SVG

Con SVG y CSS, otra cosa genial que puedes hacer es animar objetos o elementos siguiendo una ruta.

Hay 2 atributos SVG que vamos a usar para la animación:

• offset-path: La propiedad CSS offset-path especifica la ruta de desplazamiento donde se coloca el elemento.

• distancia de desplazamiento: la propiedad CSS de distancia de desplazamiento especifica una posición a lo largo de una ruta de desplazamiento.

Al combinar estas dos propiedades, puede generar animaciones como esta fácilmente:

Vea las rutas de Pen Toptal - SVG y CSS por Toptal Blog (@toptalblog) en CodePen.

Como puede ver, tenemos un nuevo elemento div.ball .

Este elemento puede ser cualquier cosa, un div, una imagen, texto, lo que sea. La idea en este ejemplo es que con el uso de offset-path y offset-distance puedes darle al elemento un camino para seguir y animar la distancia y el elemento se moverá a través del camino.

Animaciones SVG usando JavaScript

Si todos estos no son lo suficientemente sofisticados, siempre puede recurrir a JavaScript.

Animar elementos SVG con JavaScript puede ser muy parecido a animar elementos DOM. Sin embargo, con JavaScript, puede lograr las técnicas de animación que hemos revisado anteriormente, pero más fácilmente.

Anteriormente, teníamos que codificar las longitudes de las rutas en nuestro CSS. Con la ayuda de la función de JavaScript path.getTotalLength() es posible calcular la longitud de la ruta sobre la marcha y usarla según sea necesario. Puedes aprender más acerca de esto aquí.

Además, ya tienes a tu disposición varias bibliotecas que pueden hacer que las animaciones SVG sean mucho más fáciles de lo que ya son.

Snap.svg no solo facilita dibujar imágenes SVG usando JavaScript, sino que hace que animarlas sea tan simple como llamar a .animate({}) .

Otra biblioteca, anime.js, te permite hacer que un elemento div siga una ruta SVG con solo unas pocas líneas de código.

Si está buscando una biblioteca que haga más por sí misma pero que haga que los resultados se vean impresionantes, entonces Vivus es lo que está buscando. Se necesita un enfoque diferente, más basado en la configuración, para la animación de rutas SVG. Con esta biblioteca, solo tiene que agregar una ID al elemento SVG que desea dibujar y definir un objeto Vivus con esa ID. Vivus se encargará del resto.

Otras lecturas

A continuación, se incluye una lista de recursos que pueden resultarle útiles al trabajar con imágenes SVG y animarlas:

Para profundizar más en la animación SVG, puede leer este breve artículo sobre las tres formas de animar imágenes SVG y ver el video screencast de CSS Tricks.

Una cosa que este artículo no cubrió es la animación de imágenes SVG con el lenguaje de integración multimedia sincronizado (SMIL). Si bien el uso de CSV para SVG le brinda la ventaja de trabajar con algo con lo que ya está familiarizado, SMIL lleva las cosas al siguiente nivel.

Con SMIL, puede implementar efectos de animación avanzados, como la transformación de formas, utilizando solo SVG. Una guía breve pero efectiva para usar SMIL para tales efectos está disponible aquí.

Aunque, el soporte para SMIL es un poco nervioso en este momento (sin juego de palabras).

Animaciones sin concesiones para la Web

En este artículo, ha analizado varias formas en las que puede animar elementos SVG utilizando CSS o elementos HTML en rutas SVG.

SVG es liviano y se puede usar para producir gráficos nítidos independientemente del tamaño de la pantalla, el nivel de zoom y la resolución de la pantalla. Con SVG, brindar una experiencia moderna y vívida ahora es más fácil que nunca, todo mientras se aprovechan los beneficios del uso de tecnologías web estándar.

¡Y eso es! Esperamos que haya encontrado útil este tutorial de animación SVG y haya disfrutado leyéndolo.

Lecturas adicionales en el blog de ingeniería de Toptal:

• Cómo acercarse a las animaciones SVG en CSS