En 2013, Jake Archibald introdujo este genial truco de animar un trazado SVG para que parezca que se está dibujando a sí mismo. Estamos en 2020 y el truco sigue siendo popular. Lo he visto en muchos sitios web que he visitado recientemente. Yo también incluyo un cargador SVG animado en mi sitio web usando una de las bibliotecas que presentaré a continuación.

En un artículo anterior, Chris Coyier escribió sobre cómo funcionan las animaciones de ruta SVG internamente, utilizando CSS stroke-dasharrayy stroke-dashoffsetpropiedades. En este artículo, quiero presentarles cuatro bibliotecas de JavaScript que se pueden usar para crear animaciones de dibujo de rutas SVG con menos líneas de código, como este interesante ejemplo . ¿Por qué una biblioteca? Porque son ideales para animaciones complejas que involucran dos o más SVG con múltiples rutas.

Para comenzar, primero conseguiré un SVG para la demostración. Usemos este castillo de svgrepo . El castillo SVG se descarga como una imagen SVG. Pero, dado que estamos tratando con animación de ruta, lo que necesitamos es el formato de código SVG. Para obtener esto, importaré el archivo a Figma y usaré la función “Copiar como SVG” (Clic derecho → Copiar/Pegar → Copiar como SVG) para obtener el código SVG.

Para animar con éxito una ruta SVG, la forma SVG debe tener un fillde noney cada ruta SVG individual debe tener un stroke(lo configuraremos en #B2441D) y un stroke-width(establecido en 2px).

El efecto de animación que queremos crear es dibujar primero el contorno (o trazo) del SVG y luego rellenar los diferentes colores. En total, se utilizan seis colores de relleno diferentes en todo el SVG, por lo que eliminaremos el color de relleno de cada ruta y le daremos a las rutas del mismo color el mismo nombre de clase.

• #695A69:color-1
• #B2441D:color-2
• #DFDOC6:color-3
• #C8B2A8:color-4
• #DE582A:color-5
• #AO8A8A:color-6

Después de todas las modificaciones, así es como se ve el código SVG:

svg viewBox="0 0 480 480" fill="none"   path d="M231.111 183.761V150.371C231.111 149.553 231.774 148.889 232.592 148.889H24  7.407C248.225 148.889 248.889 149.552 248.889 150.371V183.761L258.342 206.667H271.111  V135.556H240H208.889V206.667H221.658L231.111 183.761Z" stroke="#B2441D" stroke-width="2px" /  path d="M311.111 420H288.889V455.556V468.889H311.111V455.556V420Z" stroke="#B2441D"   stroke-width="2px" /  path d="M191.111 420H168.889V455.556V468.889H191.111V455.556V420Z" stroke="#B2441D" stroke-width="2px" /  path d="M168.889 220V228.889V237.778H222.222V228.889H212.487L221.658 206.667H208.88   9H169.524L177.778 220H168.889Z" stroke="#B2441D" stroke-width="2px"/   !-- etc. --/svg

Esa es toda la preparación SVG que necesitamos. Veamos cómo lograr la animación deseada con las diferentes bibliotecas.

Biblioteca 1: Vivus

Vivus es una clase de JavaScript liviana (sin dependencias) que le permite animar archivos SVG como si los estuvieran dibujando. La biblioteca está disponible usando cualquiera de estas opciones . Para simplificar las cosas, usaremos un enlace CDN:

script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.5/vivus.min.js" integrity="sha512-NBLGIjYyAoYAr23l+dmAcUv7TvFj0XrqZoFa4i1o+F2VvF9SrERyMD8BHNnJn1SEGjl1AouBDcCv/q52L3ozBQ==" crossorigin="anonymous"/script

A continuación, creemos una nueva instancia de Vivus. Se necesitan tres argumentos:

1. El ID del elemento de destino (el SVG)
2. Un optionsobjeto con una docena de valores posibles.
3. Una función de devolución de llamada que se ejecuta al final de la animación.

Volviendo a mirar nuestro código SVG, el ID de SVG es svg-castle.

new Vivus('svg-castle', {   duration: 200, type:'oneByOne'});

Ahora, escribamos una función de devolución de llamada que llene las rutas con los diferentes colores que hemos definido:

function fillPath(classname, color) {  const paths = document.querySelectorAll(`#svg-castle .${classname}`);  for (path of paths){    path.style.fill = `${color}`;  }}

La fillPathfunción selecciona todas las rutas en el svg-castleelemento con el proporcionado classname, recorre y rellena cada ruta con el color especificado. Recuerde que en un paso anterior, eliminamos el relleno de cada trazado y le dimos a cada trazado la misma clase de relleno ( color-1,, color-2etc.).

A continuación, llamamos a la fillPathfunción para los seis nombres de clases diferentes y sus colores correspondientes:

function after() {  fillPath('color-1', '#695a69');  fillPath('color-2', '#b2441d');  fillPath('color-3', '#dfd0c6');  fillPath('color-4', '#c8b2a8');  fillPath('color-5', '#de582a');  fillPath('color-6', '#a08a8a')}

Esa es la función de devolución de llamada pasada a la instancia de Vivus. Consulte Pen para conocer la implementación completa.

Biblioteca 2: Walkway.js

Walkway es una biblioteca de animación SVG liviana para pathelementos liney polygon. Para comenzar a usarlo, podemos agregar la biblioteca usando npm, yarno con un enlace CDN como hicimos con Vivus. Iremos con el enlace CDN una vez más:

script src="https://cdn.jsdelivr.net/npm/walkway.js/src/walkway.min.js"/script

Con Walkway, creamos una nueva Walkwayinstancia, pasando un optionsobjeto como argumento. Luego, llamamos al drawmétodo en la nueva instancia y pasamos una función de devolución de llamada opcional que se ejecutará al final de la animación del dibujo. De nuevo, muy parecido a Vivus.

Ya hemos escrito la afterfunción de devolución de llamada en el ejemplo anterior, por lo que el resto debería ser pan comido:

const svg = new Walkway({  selector: '#svg-castle',  duration: 3000,});svg.draw(after);

Biblioteca 3: Pintor de líneas perezosas

Lazy Line Painter es una biblioteca JavaScript moderna para animación de rutas SVG. Requiere un código mínimo para su configuración. Sin embargo, si lo tuyo es una GUI, puedes usar Lazy Line Composer , que es un editor en línea gratuito para animaciones de rutas SVG de los mismos creadores. El SVG se exportará como un archivo SVG animado que se puede utilizar directamente en cualquier lugar.

La configuración básica de Lazy Line Painter es similar a la que ya hemos hecho en los otros ejemplos. Primero, obtenga la biblioteca usando npm o un enlace CDN. Al igual que en los ejemplos anteriores, usaremos un enlace CDN:

script src="https://cdn.jsdelivr.net/npm/lazy-line-painter@1.9.4/lib/lazy-line-painter-1.9.4.min.js"/script

Luego, inicializamos una nueva LazyLinePainterinstancia, que acepta dos parámetros: un selector (el ID del elemento SVG de destino) y un objeto de configuración. Llamemos al método paint en la nueva instancia:

// select the svg by idlet svg = document.querySelector('#svg-castle')// define config optionslet options = {  strokeDash: '2, 2',}// initialize new LazyLinePainter instancelet myAnimation = new LazyLinePainter(svg, options)// call the paint methodmyAnimation.paint()

Una lista completa de opciones de configuración está disponible en los documentos de la biblioteca . A diferencia de las bibliotecas anteriores, no pasamos una función de devolución de llamada al paintmétodo. En su lugar, escucharemos el complete:allcontrolador de eventos en la animación y luego pasaremos la función de devolución de llamada.

myAnimation.on('complete:all', (event) = {after()});

También podemos controlar cuándo paintse ejecuta el método utilizando detectores de eventos como lo hicimos en la siguiente demostración de codepen. Haga clic en el castillo para volver a ejecutar la animación.

Biblioteca 4: Movimiento del encuadre

Framer Motion es un poco diferente de otras bibliotecas que hemos cubierto. Es una biblioteca de animación de código abierto lista para producción para componentes de React con toneladas de tipos de animación posibles. Y sí, esto es del mismo equipo detrás de la popular herramienta de creación de prototipos Framer .

Primero, instalaremos la biblioteca con npm en la terminal:

npm install framer-motion

For SVG path drawing animations, Framer Motion provides a motion.path component that takes four props:

motion.path  d={pathDefinition}  initial={{ pathLength: 1, pathOffset: 0 }}  animate={{ pathLength: 0, pathOffset: 1 }}  transition={{ duration: 2 }}/

To use it, we’ll simply convert our SVG paths to motion.path, like this:

import React from 'react';import { motion } from "framer-motion";const AnimatedCastle = () = {  return (    svg viewBox="0 0 480 480" fill="non            e"       motion.path d="M311.111 420H288.889V455.556V468.889H311.111V455.556V420Z"              stroke="#B2441D" stroke-width="2" className="color-1"       initial={{ pathLength: 1,fill:"none", opacity:0, }}       animate={{ pathLength: 0,fill:"695A69", opacity:1 }}       transition={{ duration: 2 }}      /      motion.path d="M191.111 420H168.889V455.556V468.889H191.111V455.556V420Z"                stroke="#B2441D" stroke-width="2" className="color-2"        initial={{ pathLength: 1, fill:"none", opacity:0, }}        animate={{ pathLength: 0, fill:"#b2441d", opacity:1}}        transition={{ duration: 3 }}      /               !-- etc. --    /svg  )}

This has to be done for each SVG path. See this demo for full implementation:

There’s a caveat though: the castle SVG has over 60 paths, which is a lot. Going through them was quite daunting for me, and I found the process to be repetitive and prone to errors. For that reason, I don’t recommend Framer Motion but I would say that it is well suited for SVGs within React components with no more than five paths. For anything more than that, go with any of the previous libraries we covered.

Conclusion

That’s a look at four JavaScript libraries we can use to get hand-drawn SVG effects.

Why didn’t we cover a CSS-only solution? While it’s possible to do, it involves a lot of code repetition. For example, it means finding the total length of each path using JavaScript or with this cool trick that sets each path length to 1, and then sets the stroke-dasharrray and stroke-dashoffset of each path to its path length.

After that, we still need to define keyframes to animate the stroke-dashoffset to zero. Then, those keyframe animations will be added to each path and with an animation-delay to offset things a bit. We also have to write six different keyframe rules to fill the paths with their respective colors. Considering that the castle has over 60 individual paths, that’s over 100 lines of CSS! Not exactly the most efficient or straightforward approach.