Los SVG (gráficos vectoriales escalables) ofrecen una forma moderna de mejorar las interfaces web y de aplicaciones con gráficos escalables de alta calidad. A diferencia de los gráficos de mapa de bits tradicionales, los SVG se componen de datos vectoriales, lo que significa que pueden escalarse a cualquier tamaño sin perder calidad. Esta escalabilidad hace que los SVG sean inmensamente populares entre los desarrolladores de UI que buscan crear diseños dinámicos, responsivos y visualmente atractivos.

En esta publicación de blog, profundizaremos en el mundo de las animaciones SVG. Si es un principiante que busca explorar esta apasionante área o un desarrollador experimentado que desea perfeccionar sus habilidades, esta guía le guiará a través de diez métodos diferentes para animar SVG con ejemplos de código prácticos. Al final, estará listo para implementar estas técnicas en sus proyectos, elevando sus diseños de interfaz de usuario al siguiente nivel.

¿Por qué animar archivos SVG?

Antes de pasar a los métodos específicos, vale la pena entender por qué las animaciones SVG son tan beneficiosas:

Independencia de resolución: Los SVG se ven nítidos en cualquier densidad de pantalla, lo cual es crucial para admitir diversas resoluciones de dispositivos.

Tamaños de archivo pequeños: en comparación con muchos formatos de mapa de bits, los SVG suelen tener tamaños de archivo más pequeños, especialmente cuando las animaciones involucran formas geométricas simples y colores limitados.

Manipulabilidad: Los SVG se pueden manipular a través de CSS y JavaScript, lo que brinda flexibilidad en cómo se implementan y controlan las animaciones.

Accesibilidad: el texto dentro de los SVG sigue siendo seleccionable y buscable, lo que mejora la usabilidad y la accesibilidad.

Método 1: transiciones CSS

Una de las formas más sencillas de comenzar a animar un SVG es mediante el uso de transiciones CSS. Las transiciones CSS te permiten cambiar las propiedades de SVG sin problemas durante un período específico.

Ejemplo: girar un engranaje

Imagina que tienes un SVG de un engranaje. Quieres que este engranaje gire continuamente para indicar un proceso o estado de carga.

#gear {
  transition: transform 2s linear infinite;
}

#gear:hover {
  transform: rotate(360deg);
}

En el CSS, especificamos que la propiedad de transformación del engranaje debe realizar una transición lineal e infinita durante dos segundos. Cuando un usuario pasa el cursor sobre el engranaje, este gira 360 grados.

Método 2: fotogramas clave CSS

Para animaciones más complejas, los fotogramas clave CSS proporcionan el control que necesitas. Los fotogramas clave le permiten definir los valores de propiedad en varias etapas de la animación.

Ejemplo: círculo pulsante

Animamos un círculo para que lata, crezca y se reduzca continuamente.

@keyframes pulse {
  0%, 100% {
    r: 30;
  }
  50% {
    r: 40;
  }
}
circle {
  animation: pulse 2s infinite;
}

Aquí, @keyframes define una animación de pulso donde cambia el radio (r) del círculo.

Método 3: animaciones SVG SMIL

SMIL (lenguaje de integración multimedia sincronizado) es un lenguaje basado en XML que permite animaciones complejas directamente dentro de archivos SVG.

Ejemplo: moverse a lo largo del camino

Imagina animar un objeto para que se mueva a lo largo de una ruta predefinida.

El círculo se mueve a lo largo de la curva definida por la ruta, gracias al elemento animateMotion.

Método 4: Bibliotecas JavaScript (GreenSock)

Muchas bibliotecas de JavaScript, como GreenSock (GSAP), facilitan animaciones SVG complejas. GSAP tiene un alto rendimiento y funciona en todos los principales navegadores.

Ejemplo: pelota que rebota

Así es como puedes crear una animación de pelota que rebota usando GSAP:

gsap.to("#ball", {
  y: 60,
  duration: 1,
  ease: "bounce.out",
  repeat: -1,
  yoyo: true
});

La pelota rebota continuamente con efecto yoyo que la hace moverse hacia adelante y hacia atrás.

Método 5: variables de JavaScript y CSS

El uso de JavaScript junto con variables CSS (propiedades personalizadas) puede hacer que las animaciones SVG respondan a las interacciones del usuario u otras condiciones dinámicas.

Ejemplo: Cambio de color

Supongamos que desea que el color de relleno de un elemento SVG cambie según la posición del cursor.

document.addEventListener("mousemove", function(e) {
  const color = e.clientX > window.innerWidth / 2 ? 'red' : 'blue';
  document.documentElement.style.setProperty('--color', color);
});

Aquí, el color del círculo cambia a medida que el mouse se mueve horizontalmente por la pantalla.

Método 6: filtros SVG para animación

Los filtros SVG son herramientas poderosas para aplicar efectos visuales complejos a elementos SVG a través de animaciones.

Ejemplo: efecto de desenfoque

Un efecto de desenfoque animado puede crear una sensación de movimiento o cambio.

@keyframes blur {
  from {
    stdDeviation: 0;
  }
  to {
    stdDeviation: 5;
  }
}
circle {
  animation: blur 8s infinite alternate;
}

En esta animación, el círculo se difumina y se difumina suavemente, llamando la atención y proporcionando un efecto visual dinámico.

Ejemplo: texto revelador

El texto se puede revelar progresivamente mediante un trazado de recorte animado.

@keyframes reveal {
  from {
    width: 0;
  }
  to {
    width: 100;
  }
}
rect {
  animation: reveal 5s forwards;
}

El texto ¡Hola! se revela gradualmente de izquierda a derecha.

Método 8: transformar formas

La transformación de formas se puede lograr utilizando varias bibliotecas y funciones SVG nativas, creando transiciones perfectas entre diferentes formas.

Ejemplo: Transformación de corazón a círculo

Un ejemplo común es transformar la forma de un corazón en un círculo.

/* Add keyframes for morphing */

Usando bibliotecas como flubber o incluso CSS, el atributo "d" de las rutas se interpola entre las formas del corazón y del círculo.

Método 9: degradados animados

Los degradados en SVG también se pueden animar, lo que resulta útil para fondos vibrantes o elementos llamativos.

Ejemplo: Animación de fondo degradado

Un degradado radial animado que cambia de color puede servir como fondo dinámico.

El relleno de este rectángulo cambia suavemente a través de un espectro de colores, creando un efecto de fondo animado.

Ejemplo: cambio de color interactivo

Una interacción simple donde el SVG cambia de color al hacer clic.

cambio de función ENORME base de datos con códigos de muestra, basados ​​en la narración de historias
y un panel basado en suscripción. TEXTO DEL BOTÓN AQUÍ JavaScript.

document.querySelector('svg').addEventListener('click', function() {
  this.querySelector('circle').setAttribute('fill', 'pink');
});

Al hacer clic en el SVG, el color de relleno del círculo cambia a rosa, lo que demuestra una animación interactiva simple.

Conclusión

Las animaciones SVG abren una amplia gama de posibilidades para hacer que sus interfaces de usuario sean más atractivas y atractivas. Desde simples transiciones CSS hasta animaciones interactivas basadas en JavaScript, cada método ofrece beneficios y capacidades únicos. Experimentar con varias técnicas y comprender sus implicaciones en el rendimiento y la compatibilidad del navegador es clave para dominar las animaciones SVG. Ya sea para mejorar la experiencia del usuario o simplemente agregar estilo visual, estos diez métodos brindan una base sólida para cualquier desarrollador de UI que desee sumergirse en el mundo de las animaciones SVG.