Cómo obtener animación de escritura a mano con trazos SVG irregulares

Quería hacer una animación de escritura a mano para fuentes de caligrafía, de esas en las que las palabras se animan como si estuvieran escritas con un bolígrafo invisible. Debido a que las fuentes de caligrafía tienen anchos de trazo desiguales (en realidad, ni siquiera son trazos en términos de SVG), era casi imposible hacer este tipo de cosas con las técnicas típicas de animación de trazado. Pero encontré una aplicación innovadora de enmascaramiento SVG para lograr este efecto en cuestión de minutos.

Mientras investigaba cómo hacer esto, recopilé información de múltiples fuentes. Los combiné y pude crear el efecto final.

¡Hagamos esto juntos!

enmascaramiento SVG

Si el ancho del trazo de todas las letras de una palabra u oración es uniforme, entonces Craig Roblewsky tiene una buena manera de animar la escritura a mano. Esta es una técnica inteligente que anima los atributos de trazo-dasharray y desplazamiento de trazo de SVG.

Las fuentes de caligrafía como las que queremos animar aquí tienen un ancho de trazo desigual en todas las letras, por lo que tendrá que ser una pathy animarlas de esa manera no funcionará. El truco consistirá en utilizar enmascaramiento SVG.

Comencemos por descubrir qué fuente queremos usar. El que usaré a lo largo de este artículo es HaveHeartOne, que tiene una bonita apariencia de pincelada que es perfecta para escribir a mano.

La idea es crear una oración maska partir de la misma oración que queremos animar y luego colocarla encima de la oración. En otras palabras, habrá dos capas de la misma oración. Como la máscara está encima, la haremos blanca para ocultar la frase original debajo. Animaremos la máscara para que la capa inferior se revele a medida que se ejecuta la animación.

haciendo las capas

La base de este truco es que en realidad vamos a crear dos capas separadas, una encima de la otra:

1. La capa inferior son las palabras con la fuente deseada (en mi caso es HaveHeartOne).
2. La capa superior es un camino hecho a mano que se aproxima a las palabras.

Crear el camino artesanal no es tan difícil como podría pensar. Necesitamos un camino continuo para animar y revelar la frase. Eso significa que no textpara esto. Sin embargo, muchas aplicaciones de ilustración, incluido Illustrator, pueden convertir letras en trazados:

1. Selecciona las palabras.
2. Abra el panel "Propiedades" y haga clic en Crear esquema .

Y, como por arte de magia, las letras se convierten en contornos con puntos vectoriales que siguen la forma.

En este punto es muy importante dar nombres significativos a estas rutas, que se almacenan como capas. Cuando esperamos que esto sea SVG, la aplicación generará código y utilizará esos nombres de capas como ID y clases.

Observe cómo las letras individuales tienen un fillpero no stroke:

En SVG, podemos animar el strokede la manera que queramos, por lo que necesitaremos crearlo como nuestra segunda capa principal, la máscara. Podemos utilizar la herramienta lápiz para trazar las letras.

1. Seleccione la herramienta pluma.
2. Establezca la opción Rellenar en "Ninguno".
3. El ancho del trazo dependerá de la fuente que estés usando. Estoy configurando la opción Ancho de trazo en 5px y configurando su color en negro.
4. ¡Empieza a dibujar!

Mis habilidades con la herramienta de lápiz no son muy buenas, pero está bien. Lo importante no es la perfección, sino que la mascarilla cubra la capa que hay debajo.

Crea una máscara para cada letra y recuerda usar buenos nombres para las capas. Y definitivamente reutilice las máscaras donde haya más de una con la misma letra: no es necesario volver a dibujar el mismo carácter "A" una y otra vez.

Exportador

A continuación, necesitamos exportar el archivo SVG. Es probable que eso dependa de la aplicación que esté utilizando. En Illustrator, puedes hacerlo con Archivo → Exportar → Exportar como → SVG

Se abrirá la ventana emergente de opciones de SVG; a continuación se muestra la configuración preferida para exportar para este ejemplo.

Ahora bien, no todas las aplicaciones exportarán SVG exactamente de la misma manera. Algunos hacen un excelente trabajo generando código delgado y eficiente. Otros, no tanto. De cualquier manera, es una buena idea abrir el archivo en un editor de código.

Cuando trabajamos con SVG, hay algunos consejos a considerar para ayudar a que sean lo más livianos posible en aras del rendimiento:

1. Cuantos menos puntos, más ligero será el expediente.
2. Usar uno más pequeño viewBoxpuede ayudar.
3. Hay muchas herramientas para optimizar SVG aún más.

Editar manualmente el código SVG

Ahora bien, no todas las aplicaciones exportarán SVG exactamente de la misma manera. Algunos hacen un excelente trabajo generando código delgado y eficiente. Otros, no tanto. De cualquier manera, es una buena idea abrir el archivo en un editor de código y realizar algunos cambios.

Algunas cosas que vale la pena hacer:

1. Proporcione el svgelemento widthy heightlos atributos que se establecen para dimensionar el diseño final.
2. Usa el titleelemento. Dado que estamos trabajando con rutas, los lectores de pantalla no reconocen las palabras. Si necesita que se lean cuando están enfocados, esto será suficiente.
3. Probablemente habrá elementos de grupo ( g) con ID basadas en las capas nombradas en la aplicación de ilustración. En esta demostración específica, tengo dos elementos de grupo: #marketing-lab(el esquema) y #marketing-masks(las máscaras). Mueve las máscaras a un defselemento. Esto lo ocultará visualmente, que es lo que queremos.
4. Probablemente habrá caminos dentro del grupo de máscaras. Si es así, continúe y elimine el transformatributo de ellos.
5. Envuelva cada elemento de ruta en a masky asígneles una .maskclase y una identificación que indique qué letra está enmascarada.

Por ejemplo:

mask  path ... //mask

Dentro del grupo de esquema (al que le he dado un ID #marketing-lab), aplique la máscara al elemento de ruta de carácter respectivo usando mask="url(#mask-marketing-M)".

g  path mask="url(#mask-marketing-M)" d="M427,360, ... " //g

Aquí está el código para un personaje usando todas las modificaciones anteriores:

svg  viewBox="0 0 381 81"  titleMarketing Lab/title  defs    g      mask        path          d="M375.5, ... ,9-10" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="7" /      /mask    /g  /defs  g    path      mask="url(#mask-marketing-M)"       d="M427,360.22c-.11.08-.17.14-.17.18H427c0" /  /g/svg

Finalmente, agregaremos CSS para el .maskelemento que anula el color del trazo con blanco para que quede oculto frente al color de fondo del documento.

.mask {  fill: none;  stroke: #fff;}

Animación

Vamos a animar la stroke-dasharraypropiedad CSS para obtener el efecto de revelación de línea continua. Podemos hacer la animación ya sea con CSS y JavasScript o con Greensock (GSAP). Examinaremos ambos enfoques.

CSS y JavaScript

Es bastante sencillo hacer esto solo en CSS. Puede usar JavaScript para calcular la longitud de la ruta y luego animarla usando ese valor devuelto. Si no desea utilizar JavaScript en absoluto, puede calcular la longitud de la ruta una vez y codificar ese valor en el CSS.

/* Set the stroke-dasharray and stroke-dashoffset */.mask {  stroke-dasharray: 1000;  stroke-dashoffset: 1000;}
/* Animation the stroke-dashoffset to a zero length */@keyframes strokeOffset {  to {    stroke-dashoffset: 0;  }}
/* Apply the animation to each mask */#mask-M {  animation: strokeOffset 1s linear forwards;}

JavaScript puede ayudar con el conteo si prefieres seguir esa ruta:

// Put the masks in an arrayconst masks = ['M', 'a', 'r', 'k-1', 'k-2', 'e', 't-line-v', 't-line-h', 'i-2', 'i-dot', 'n', 'g', 'lab-l', 'lab-a', 'lab-b']
masks.forEach((mask, index, el) = {  const id = `#mask-${mask}` // Prepend #mask- to each mask element name  let path = document.querySelector(id)  const length = path.getTotalLength() // Calculate the length of a path  path.style.strokeDasharray = length; // Set the length to stroke-dasharray in the styles  path.style.strokeDashoffset = length; // Set the length to stroke-dashoffset in the styles})

GSAP

GSAP tiene un complemento drawSVG que le permite revelar (u ocultar) progresivamente el trazo de un SVG path, line, polyline, polygon, recto ellipse. Debajo del capó, utiliza CSS stroke-dashoffsety stroke-dasharraypropiedades.

Así es como funciona:

1. Incluya scripts GSAP y drawSVG en el código.
2. Oculte el gráfico inicialmente usando autoAlpha.
3. Crea una línea de tiempo.
4. Establezca autoAlphaen truepara el gráfico.
5. Agregue todos los ID de las máscaras de ruta de los personajes a la línea de tiempo en la secuencia adecuada.
6. Utilice drawSVG para animar todos los personajes.

Referencias

1. Línea de dibujo animada en SVG por Jake Archibald
2. Creación de la animación de mi logotipo por Cassie Evans