Revista SVG-smash optimizada

SVG Animation me lleva de regreso a los cómics de Hannah-Barbera que vi cuando era niño. Actuación Juego raro,,,,, Peligros de Penélope Pitstop,ciertamente, Bear de yogui. Me inspiraron a recrear algunos clásicos con corazón amoroso Título de champán Use animaciones CSS, SVG y SMIL.

Sin embargo, hacer la carga de animación rápidamente y salir sin problemas requiere nostalgia. Requiere un diseño limpio, código de inclinación y el proceso de hacer que los SVG complejos sean más fáciles de animar. Eso es lo que hago.

Ya se trate de proyectos personales o trabajos comerciales, la preparación de SVGS asegura que sean accesibles. La optimización de ellos garantiza que se carguen rápidamente, especialmente en dispositivos móviles, y consideren cuidadosamente cómo su estructura facilita el mantenimiento de ellos. He desarrollado uno El proceso de equilibrar los efectos visuales con accesibilidad y rendimiento Y hacer que los SVG complejos sean más fáciles de usar.

Entonces, para explicar mi proceso, elegí Rendimiento de yogui En enero de 1960, Yogi robó la escoba de una bruja para ayudarlo a atrapar la canasta «Pic-Aa-Nic», llamada «The Charming Bear», que se emitió por primera vez.

«¡Oye, oye, oye!»

Comience a limpiar y considerar un diseño optimizado

Mantenerlo simple es la clave para hacer optimizaciones y preparar SVG de animación. Herramientas como Adobe Illustrator convierten las imágenes de mapa de bits en vectores, pero la salida generalmente contiene demasiados grupos, capas y máscaras externas. En cambio, comencé a limpiar el boceto, a trabajar desde la imagen de referencia y luego usar la herramienta PEN para crear la ruta.

pista: Diseñador de afinidad (Reino Unido) y bosquejo (Países Bajos) es un reemplazo para Adobe Illustrator y Figma. Ambos son independientes y están ubicados en Europa. Sketch ha sido mi aplicación de diseño predeterminada desde que Adobe mató a los fuegos artificiales.

Comience con el contorno

Para estas ilustraciones de títulos de Toon, primero usé la herramienta PEN para dibujar el contorno negro de la menor cantidad de puntos de anclaje posible. Cuantos más puntos de la forma, más grandes serán los archivos, por lo que simplificar la ruta y reducir el número de puntos hará que el SVG sea más pequeño, generalmente sin diferencias visuales significativas.

Recuerde que las partes de esta ilustración de yogui eventualmente serán animadas, y reservé una descripción general del cuerpo, la cabeza, el collar y la corbata por separado para poder moverlos de forma independiente. La cabeza puede asentir, la corbata puede abofetear, al igual que en esos cómics clásicos, el collar del yogui oculta la conexión entre ellos.

Dibujar formas de fondo simples

Con el contorno, utilicé la herramienta PEN nuevamente para dibujar nuevas formas que estaban llenas de colores. Estos colores están detrás del contorno, por lo que no necesitan igualarlos exactamente. Cuantos menos puntos de anclaje, menor sea el tamaño del archivo.

Lamentablemente, ni el diseñador de afinidad ni los bocetos tienen herramientas para simplificar la ruta, pero en todo caso, el uso de Adobe Illustrator puede raspar unos miles adicionales de estas formas de fondo.

Optimizar el código

No son solo los metadatos los que hacen que SVG sea más grande. La forma en que exporta desde su aplicación de diseño también afectará el tamaño del archivo.

Por defecto, solo estas formas de fondo simples exportadas de Adobe Illustrator incluyen grupos innecesarios, máscaras y datos de ruta hinchada. El código del boceto no es mejor, y hay mucho espacio para mejorar incluso en su código de compresor SVGO. Confío en Jake Archibald svgomguse SVGO V3 y siempre proporcione el mejor SVG optimizado.

Elementos SVG en capas

Mi proceso de preparación de SVG para la animación va mucho más allá de dibujar vectores y optimizar rutas: también incluye mi camino Código de construcción sí mismo. Incluso el código optimizado puede ser una pesadilla cuando cada elemento visual se rellena en un archivo SVG. Encontrar un camino o grupo específico a menudo es como buscar agujas en un pajar.

Es por eso que desarrollo SVG en capas, exporto y optimizo un conjunto de elementos a la vez, siempre en el orden en que aparecen en el archivo final. Esto me permite construir el SVG gradualmente pegándolo en cada sección de limpieza. Por ejemplo, comienzo con fondos como gradientes y gráficos de título.

Ahora puedo identificar fácilmente la ruta del gradiente de fondo y sus relacionados, en lugar de enfrentar el muro del código SVG linearGradientVea el grupo que contiene el gráfico de título. Aproveché esta oportunidad para agregar comentarios al código, lo que facilitará la edición y agregar animaciones en el futuro:

<svg ...>
  <defs>
    <!-- ... -->
  </defs>
  <path fill="url(#grad)" d="…"/>
  <!-- TITLE GRAPHIC -->
  <g>
    <path … />
    <!-- ... --> 
  </g>
</svg>

A continuación, agregué un sendero borrosa de la escoba de Yogi Airborne. Esto incluye definir un filtro de desenfoque gaussiano y colocar una ruta entre el fondo y la capa de título:

<svg ...>
  <defs>
    <linearGradient id="grad" …>…</linearGradient>
    <filter id="trail" …>…</filter>
  </defs>
  <!-- GRADIENT -->
  <!-- TRAIL -->
  <path filter="url(#trail)" …/>
  <!-- TITLE GRAPHIC -->
</svg>

Luego están las estrellas mágicas, agregadas en el mismo orden:

<svg ...>
  <!-- GRADIENT -->
  <!-- TRAIL -->
  <!-- STARS -->
  <!-- TITLE GRAPHIC -->
</svg>

Para mantener todo organizado y animación listos, creé un grupo vacío que puede acomodar todas las partes del yogui:

<g id="yogi">...</g>

Luego construí el yogui desde cero, comenzando con accesorios de fondo, al igual que su escoba:

<g id="broom">...</g>

El siguiente es los elementos de agrupación de su cuerpo, cabeza, collar y corbata:

<g id="yogi">
  <g id="broom">…</g>
  <g id="body">…</g>
  <g id="head">…</g>
  <g id="collar">…</g>
  <g id="tie">…</g>
</g>

Dado que exporto cada capa del mismo tamaño de arte, no tengo que preocuparme por los problemas de alineación o posicionamiento más tarde; todos se conectan automáticamente para colocar. Mantengo mi código Limpio,,,,, Legibley Ordenado lógicamente Mediante elementos de capas de esta manera. También hace que la animación sea más suave, ya que cada componente es más fácil de reconocer.

Elementos de reutilización <use>

Los archivos SVG pueden volverse voluminosos cuando se reutilizan formas repetidas. Mi entretenimiento en la tarjeta de título «colorido oso» contiene 80 estrellas de tamaño. La combinación de todas estas formas en una ruta optimizada reducirá el tamaño del archivo a 3KB. Pero quiero animar una sola estrella, que casi la duplica:

<g id="stars">
 <path class="star-small" fill="#eae3da" d="..."/>
 <path class="star-medium" fill="#eae3da" d="..."/>
 <path class="star-large" fill="#eae3da" d="..."/>
 <!-- ... -->
</g>

Estrellas en movimiento fill Ponga el valor del atributo de valor en su grupo principal, reduciendo así el peso total:

<g id="stars" fill="#eae3da">
 <path class="star-small" d="…"/>
 <path class="star-medium" d="…"/>
 <path class="star-large" d="…"/>
 <!-- ... -->
</g>

Sin embargo, una opción más eficiente y manejable es definir cada tamaño de estrella como una plantilla reutilizable:

<defs>
  <path id="star-large" fill="#eae3da" fill-rule="evenodd" d="…"/>
  <path id="star-medium" fill="#eae3da" fill-rule="evenodd" d="…"/>
  <path id="star-small" fill="#eae3da" fill-rule="evenodd" d="…"/>
</defs>

Con esta configuración, cambiar el diseño de una estrella solo significa que su plantilla se actualiza una vez, y cada instancia se actualiza automáticamente. Entonces, lo mencioné con todos <use> y colocarlos x y y propiedad:

<g id="stars">
  <!-- Large stars -->
  <use href="#star-large" x="1575" y="495"/>
  <!-- ... -->
  <!-- Medium stars -->
  <use href="#star-medium" x="1453" y="696"/>
  <!-- ... -->
  <!-- Small stars -->
  <use href="#star-small" x="1287" y="741"/>
  <!-- ... -->
</g>

Este enfoque hace que SVG sea más fácil de administrar, una carga más ligera e iterate más rápido, especialmente cuando se usa docenas de elementos duplicados. Lo más importante, mantiene los marcadores limpios Flexibilidad o rendimiento intransigentes.

Agregar animación

Las estrellas detrás de la escoba robada de un yogui aportan tanta personalidad a la animación. Quiero que brillen sobre un fondo azul oscuro en un patrón aparentemente aleatorio, por lo que primero definí una animación de cuadro de bucle de bucle. opacity nivel:

@keyframes sparkle {
  0%, 100% { opacity: .1; }
  50% { opacity: 1; }
}

A continuación, aplico esta animación de bucle a cada use Elementos en mi grupo de estrellas:

#stars use {
  animation: sparkle 10s ease-in-out infinite;
}

El secreto para crear parpadeo convincente es cambiar. El retraso y la duración de la animación que uso en estrellas nth-child Selector, comenzando con los efectos flash más rápidos y comunes:

/* Fast, frequent */
#stars use:nth-child(n + 1):nth-child(-n + 10) {
  animation-delay: .1s;
  animation-duration: 2s;
}

A partir de ahí, lo colocé en otras veces para mezclar. Algunas estrellas brillaban lenta y dramáticamente, mientras que algunas estrellas son más aleatorias, con varios ritmos y pausas:

/* Medium */
#stars use:nth-child(n + 11):nth-child(-n + 20) { ... }

/* Slow, dramatic */
#stars use:nth-child(n + 21):nth-child(-n + 30) { ... }

/* Random */
#stars use:nth-child(3n + 2) { ... }

/* Alternating */
#stars use:nth-child(4n + 1) { ... }

/* Scattered */
#stars use:nth-child(n + 31) { ... }

Al construir reflexión SVG y reutilizar elementos, puedo construir animaciones complejas sin código hinchado, incluso tan simple como cambiar el efecto opacity chispa.

Luego, para agregar realismo, hice la cabeza del yogui:

@keyframes headWobble {
  0% { transform: rotate(-0.8deg) translateY(-0.5px); }
  100% { transform: rotate(0.9deg) translateY(0.3px); }
}

#head {
  animation: headWobble 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite alternate;
}

Su ola de corbata:

@keyframes tieWave {
  0%, 100% { transform: rotateZ(-4deg) rotateY(15deg) scaleX(0.96); }
  33% { transform: rotateZ(5deg) rotateY(-10deg) scaleX(1.05); }
  66% { transform: rotateZ(-2deg) rotateY(5deg) scaleX(0.98); }
}

#tie {
  transform-style: preserve-3d;
  animation: tieWave 10s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

Su escoba se balancea:

@keyframes broomSwing {
  0%, 20% { transform: rotate(-5deg); }
  30% { transform: rotate(-4deg); }
  50%, 70% { transform: rotate(5deg); }
  80% { transform: rotate(4deg); }
  100% { transform: rotate(-5deg); }
}

#broom {
  animation: broomSwing 4s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
}

Finalmente, el mismo Yogi giró suavemente su escoba mágica:

@keyframes yogiWobble {
  0% { transform: rotate(-2.8deg) translateY(-0.8px) scale(0.998); }
  30% { transform: rotate(1.5deg) translateY(0.3px); }
  100% { transform: rotate(3.2deg) translateY(1.2px) scale(1.002); }
}

#yogi {
  animation: yogiWobble 3.5s cubic-bezier(.37, .14, .3, .86) infinite alternate;
}

Todos estos movimientos sutiles dan vida al yogui. Al desarrollar SVG estructurados, puedo crear animaciones llenas de personajes sin tener que escribir una sola línea de JavaScript.

Pruébelo usted mismo:

en conclusión

Ya sea que esté recreando la tarjeta de título clásica o animando el icono para la interfaz, estos principios son los mismos:

1. Empiece a limpiar,
2. Optimizar lo antes posible
3. Considere todo sobre la animación.

SVG ofrece una increíble libertad creativa, pero solo si inclinación y Se puede administrar. Cuando planifique el proceso como una unidad de producción, un elemento de elemento, un elemento, pasará menos tiempo desintiendo el código y más tiempo dando vida a su trabajo.

(GG, YK)