Animación de línea SVG para los no iniciados

Hoy vamos a animar una ilustración creada en Adobe Illustrator, usando SVG y CSS. Utilizaremos una técnica popularizada por Polygon en sus revisiones de Playstation 4 y Xbox One. Estos son excelentes ejemplos de lo que es posible, pero vamos a trabajar con algo mucho más simple.

Una paleta

Preparando su archivo vectorial

Antes de comenzar a animar, es importante tomarse el tiempo para preparar adecuadamente su archivo. Este paso inicial requiere cierto conocimiento del ilustrador. Para lograr el efecto de dibujo, en primer lugar, su ilustración deberá usar trazos. Si solo está interesado en cómo lograr el efecto de dibujo, puede omitir esta sección.

Nombra tus capas

Siempre debe nombrar sus capas, y esto es especialmente cierto cuando trabaja con SVG. Si no estás acostumbrado a ellos, la salida SVG puede parecer bastante complicada. Sé amable contigo mismo o con tus colegas y tómate un momento para nombrar tus capas. Hágalo simple: solo necesitan ser lo suficientemente descriptivos para identificar el camino. Nombra las subcapas que están anidadas debajo de la capa principal. Puede ver las subcapas haciendo clic en el menú desplegable de la capa principal.

Nombrar sus (sub) capas antes de exportar le ahorrará un gran dolor de cabeza.

Exportador

Tiendo a exportar el vector seleccionado usando Archivo> Exportar selección ... Esto garantiza que el archivo se recorta hasta los límites de su obra de arte y no de su mesa de trabajo. Aquí están mis configuraciones de exportación preferidas:

Salida

¿Recuerdas cuando nombramos nuestras capas antes de exportar? Aquí es donde eso es útil.

¿Ves las identificaciones? Imagínese tratando de averiguar qué ruta es cuál leyendo la descripción de la ruta (d = "M4808.8.395 ..."). Técnicamente, podría hacerlo si fuera un masoquista con un profundo conocimiento de la sintaxis del camino.

Mejoramiento

Por lo general, es una buena práctica optimizar su SVG usando herramientas como SVGO, pero en un caso como este donde está trabajando directamente con el marcado, querrá mantener intacta su salida original. La mayoría de las herramientas de optimización minimizan y eliminan el archivo de las identificaciones, lo que dificulta trabajar con ellas.

Para obtener más información sobre cómo optimizar su SVG, consulte la excelente publicación de Sara Soueidan, SVG Tips for Designers.

Animando la línea

Antes de comenzar, es importante comprender dos propiedades: stroke-dasharray y stroke-dashoffset.

Stroke Dash Array

La propiedad stroke-dasharray crea guiones en su trazo. En el ejemplo a continuación tengo una línea de 200 px. Como puede ver, ajustar el valor crea guiones y espacios separados de manera uniforme.

Compensación de trazo

La propiedad stroke-dashoffset especifica la distancia a la ruta, el patrón comenzará. No se preocupe demasiado por la configuración de stroke-dasharray que he aplicado. Todo lo que está haciendo es alternar la longitud de los guiones y los espacios (5px dash, 10px gap, 30px dash, 10px gap). He aumentado el segundo guión a 30 píxeles para ayudar a visualizar lo que está sucediendo.

La propiedad stroke-dashoffset especifica la distancia a la ruta, el patrón comenzará.

Como puede ver, ajustando el desplazamiento del tablero de trazos, reposiciona o compensa la posición de inicio (moviéndolo hacia atrás) de la secuencia del tablero. En el ejemplo, lo he compensado en 15 píxeles, la cantidad del primer guión y el espacio combinados, comenzando el trazo en el segundo tablero de 30 píxeles.

Animando la compensación

Aquí es donde las cosas se ponen divertidas.

Si establecemos la longitud del guión en la misma longitud de la línea y desplazamos la posición de inicio a la misma longitud (recuerde que mueve la posición de inicio a la izquierda) no veremos nada, porque el guión y su espacio son los mismos longitud. Ahora solo estamos viendo la brecha. Si animamos el desplazamiento al valor original de cero, podemos crear nuestro efecto deseado.

Endulzando nuestra paleta

Ahora apliquemos lo que hemos aprendido a nuestra paleta.

Querrás calcular la longitud de cada ruta. No necesita ser exacto. Puede hacer esto adivinando (generalmente solo incremento en 100 hasta que se complete la ruta), pero si desea un número más exacto, puede navegar al panel de Información del documento en Illustrator y seleccionar una ruta, se mostrará su longitud.

Ventana> Información del documento> Objetos> Rutas

Para que sea más fácil de digerir, he ocultado los atributos de ruta, ya que en este ejemplo nos centraremos principalmente en el CSS. Le doy una clase a cada uno de nuestros caminos y les aplico la animación offset. Luego, usando la técnica que describí anteriormente, le di a cada ruta una matriz de guiones y un valor de compensación de guiones.

Esto es lo que tenemos.

Esto se ve bien, pero podemos hacerlo mejor.

Toques finales

Al aumentar nuestros valores de guión, podemos acelerar la animación de ciertos trazos. Esto se debe a que tiene una distancia más larga que recorrer pero todavía solo 2 segundos para completarlo, lo que definimos en nuestra animación de "desplazamiento". También podemos retrasar cuando ciertos trazos comienzan a animarse, usando animación-delay. Variar las velocidades y establecer demoras en diferentes golpes creará un resultado más interesante.

Y ahí lo tenemos. Si desea ver el codepen, puede encontrarlo aquí.

Una nota final: esto no funcionará con SVG incrustados. Si está planeando usar esto en un proyecto, deberá alinear sus SVG, ya sea manualmente o con la ayuda de una herramienta. Somos fanáticos de react-inlinesvg, pero si no usa react, hay muchos otros que puede encontrar sin demasiado esfuerzo.

Actualización: 19/11/16

Una nota sobre la compatibilidad del navegador

Algunos lectores señalaron problemas con esta técnica en ciertos navegadores. He agregado esta sección para completar.

Microsoft Edge

Esta técnica es compatible. Edge requiere que use una unidad explícita para los valores de su propiedad. Entonces, en nuestro caso, simplemente necesitamos ajustar todas nuestras propiedades de trazo para usar ‘px’ como su unidad. He actualizado el bolígrafo para incluirlos.

explorador de Internet

Desafortunadamente, Internet Explorer no admite la animación de la propiedad stroke-dashoffset usando css.

La recomendación más simple sería deshabilitar la animación en IE y priorizar la visualización de su contenido. Si desea admitir Internet Explorer, hay un par de soluciones javascript a su disposición.

  1. Un usuario de StackOverflow describe una solución que actualiza el desplazamiento para cada cuadro en la animación.
  2. Vivus es un complemento popular que viene con una variedad de animaciones y opciones listas para usar.

Muchas gracias a CSS Tricks y Vox por su trabajo en el tema. Obtenga más información sobre la técnica visitando estos enlaces.