Cómo obtener animación de escritura a mano con trazos irregulares SVG »Wiki Ùtil Programar Plus

0

Quería hacer una animación de escritura a mano para fuentes de caligrafía, del tipo en el que las palabras se animan como si las escribiera 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 ruta. Pero encontré una aplicación innovadora de enmascaramiento SVG para lograr este efecto en cuestión de minutos.

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

¡Hagamos esto juntos!

Enmascaramiento SVG

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

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

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

La idea es crear un <mask> de la misma oración que queremos animar, luego colóquelo encima de la oración. En otras palabras, habrá dos capas de la misma oración. Dado que la máscara se encuentra en la parte superior, la haremos blanca para que oculte la oración original debajo. Animaremos la máscara para que se revele la capa inferior a medida que se ejecuta la animación.

Haciendo las capas

La base de este truco es que 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 hecho a mano no es tan difícil como podría pensar. Necesitamos un camino continuo para animar y revelar la oración. Eso significa que no <text> para esto. Pero, muchas aplicaciones ilustradas, incluido Illustrator, pueden convertir letras en trazados:

  1. Seleccione 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.

Mostrando las palabras Laboratorio de marketing en rojo en Illustrator envueltas en puntos vectoriales azules.¡Imagínate dibujar todo eso a mano!

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 usará esos nombres de capa como ID y clases.

Mostrando las capas de Illustrator de las letras con el nombre adecuado.Esos nombres son mucho más agradables que los que se habrían generado automáticamente.

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

Mostrando la letra M seleccionada en Illustrator con el panel de propiedades abierto, lo que indica que no hay trazo en la forma.

En SVG, podemos animar el stroke de la forma que queremos, así que vamos a necesitar crear eso como nuestra segunda capa principal, la máscara. Podemos usar la herramienta Pluma para trazar las letras.

  1. Seleccione la herramienta Pluma.
  2. Establezca la opción Relleno 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 estableciendo 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 máscara cubra la capa debajo de ella.

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

Se muestran las formas de las letras del Laboratorio de marketing completamente cubiertas por las capas de contorno negro.

Exportador

A continuación, necesitamos exportar el archivo SVG. Eso probablemente dependerá de la aplicación que esté utilizando. En Illustrator, puede hacerlo con Archivo → Exportar → Exportar como → SVG

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

Mostrando las opciones de exportación de SVG en Illustrator.

Ahora, no todas las aplicaciones exportarán SVG de la misma manera. Algunos hacen un excelente trabajo al generar 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 que se deben considerar para ayudar a que sean lo más livianos posible en aras del rendimiento:

  1. Cuantos menos puntos, más clara será la lima.
  2. Usando un más pequeño viewBox poder ayudar.
  3. Hay muchas herramientas para optimizar SVG aún más.

Editar manualmente el código SVG

Ahora, no todas las aplicaciones exportarán SVG de la misma manera. Algunos hacen un excelente trabajo al generar 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 hacer algunos cambios.

Algunas cosas que vale la pena hacer:

  1. Dar el <svg> elemento width y height atributos que se establecen para dimensionar el diseño final.
  2. Utilizar el <title> elemento. Dado que estamos trabajando con rutas, los lectores de pantalla no reconocen las palabras. Si necesita que se lean cuando está enfocado, entonces esto funcionará.
  3. Probablemente habrá elementos de grupo (<g>) con los ID basados ​​en las capas que se nombraron 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). Mueva las máscaras en un <defs> elemento. Esto lo ocultará visualmente, que es lo que queremos.
  4. Es probable que haya caminos dentro del grupo de máscaras. Si es así, continúe y retire el transform atributo de ellos.
  5. Envuelva cada elemento de la ruta en un <mask> y dales un .mask clase y una identificación que indica qué letra está enmascarada.

Por ejemplo:

<mask id="mask-marketing-M">
  <path class="mask" id="mask-M" ... />
</mask>

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

<g id="marketting-lab">
  <path mask="url(#mask-marketing-M)" id="marketting-char-M" d="M427,360, ... " />
</g>

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 81" class="marketing-lab">
  <title>Marketing Lab</title>
  <defs>
    <g id="marketing-masks">
      <mask id="mask-marketing-M">
        <path class="mask" id="mask-M"
          d="M375.5, ... ,9-10" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="7" />
      </mask>
    </g>
  </defs>
  <g id="marketting-lab">
    <path
      mask="url(#mask-marketing-M)" id="marketting-char-M" 
      d="M427,360.22c-.11.08-.17.14-.17.18H427c0" />
  </g>
</svg>

Finalmente, agregaremos CSS para el .mask elemento que anula el color del trazo con blanco para que quede oculto contra el color de fondo del documento.

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

Animación

Vamos a animar el CSS stroke-dasharray propiedad para obtener el efecto de revelado de línea continua. Podemos hacer la animación 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 prefiere seguir esa ruta:

// Put the masks in an array
const 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 carrera de un SVG <path>, <line>, <polyline>, <polygon>, <rect>, o <ellipse>. Bajo el capó, está usando CSS stroke-dashoffset y stroke-dasharray propiedades.

Así es como funciona:

  1. Incluya los scripts GSAP y drawSVG en el código.
  2. Oculte el gráfico inicialmente usando autoAlpha.
  3. Crea una línea de tiempo.
  4. Colocar autoAlpha a true para el gráfico.
  5. Agregue todos los ID de máscaras de ruta de caracteres a la línea de tiempo en la secuencia adecuada.
  6. Usa drawSVG para animar a 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
(Visited 5 times, 1 visits today)