Los gráficos vectoriales escalables (SVG) son más que simples archivos de imagen. Como una aplicación XML, los SVG contienen marcas que se ven y funcionan de manera muy similar a HTML. También puede usarlos junto con código CSS y JavaScript. Esto hace posible animar archivos SVG, creando imágenes complejas que funcionan bien para el diseño web y otros entornos dinámicos.
Pero, ¿cómo se hace una animación SVG? Comience con una forma SVG, anímela usando CSS y aproveche estos principios para usar la animación en su propio trabajo.
Animación de SVG con HTML y CSS
Aunque puede usar JavaScript para animar archivos SVG mediante programación, CSS ahora también tiene un buen soporte para animaciones. Puede encontrar todo el código de muestra en CodePen para este proyecto .
Creación de una imagen SVG dentro de HTML
El primer paso en este proceso es crear la imagen SVG con la que trabajará. Puede encontrar el marcado SVG en el panel HTML en CodePen.
Estructura SVG
Si bien los SVG comparten un formato similar al HTML, las etiquetas que usa para crearlos son diferentes. Un SVG tiene etiquetas de apertura y cierre ( <svg></svg> ) que pueden contener una variedad de propiedades diferentes. En nuestro caso, estamos usando las propiedades id y viewBox . La propiedad id funciona como cualquier otro ID de HTML, brindándole un identificador único para usar en su CSS/JS. La propiedad viewBox establece el tamaño de nuestro SVG.
<!-- SVG with a responsive size -->
<svg id="MUOSVGAnimation" viewBox="0 0 800 600">
<!-- SVG content -->
</svg>
Puede usar las propiedades de ancho y alto en su lugar, como lo demuestra el siguiente ejemplo. Sin embargo, viewBox crea un SVG receptivo que coincidirá con el tamaño de la ventana gráfica sin romper su relación de aspecto.
<!-- SVG with a static size -->
<svg id="MUOSVGAnimation" width="800" height="600">
<!-- SVG content -->
</svg>
formas SVG
Puede crear imágenes detalladas con SVG, con una variedad de herramientas de diferentes formas a su disposición. Este ejemplo de SVG usa tres de las formas disponibles, pero hay muchas otras. Cada una de las formas en este ejemplo tiene una identificación única que las animaciones CSS pueden usar más adelante.
- Elipse SVG: Esta es una herramienta circular/ovalada. Especifica propiedades para el radio del eje y/x (rx/ry), el color de relleno y el ancho del trazo. Es importante recordar que el radio que elija con esta herramienta será la mitad del diámetro de la forma.
<ellipse id="circle" rx="100" ry="100" fill="#ffed00" stroke-width="0"/>
SVG Rect: la herramienta SVG rect crea un cuadrado o un rectángulo. Este tiene propiedades para ancho/alto, una transformación, color de relleno y ancho de trazo
<rect id="square" width="200" height="200" transform="translate(300 200)" fill="#05f"
stroke-width="0"/>
Polígono SVG: use un polígono SVG para establecer un número específico de puntos y crear formas arbitrarias de diferentes tamaños. El polígono del ejemplo tiene tres lados, lo que lo convierte en un triángulo, y puedes ver la posición de cada punto trazado en sus propiedades. Junto con esto, tenemos propiedades para la posición, el color de relleno y el ancho del trazo del triángulo.
<polygon id="triangle" points="15,-97 115,102 -84,102 15,-97"
transform="translate(0,0)" fill="#f00" stroke-width="0"/>
Una vez que la animación esté en su lugar, las formas se alinearán una al lado de la otra.
Estas tres formas SVG son algunas de las más comunes, pero hay más para elegir. Puede usar las siguientes formas cuando trabaje con una animación SVG :
- Círculo SVG: esta forma es similar a una elipse, pero siempre tiene radios X e Y iguales.
- Línea SVG: Una línea SVG es un segmento de una sola línea con dos puntos, uno en cada extremo.
- Polilínea SVG: Las polilíneas son como líneas básicas, solo que pueden tener más de dos puntos.
- Polígono SVG: los polígonos SVG son como rectángulos, solo que pueden tener más de cuatro puntos, lo que hace posibles formas complejas.
- Ruta SVG: las rutas SVG funcionan de manera similar a la herramienta Pluma en Adobe Photoshop. Las líneas se pueden conectar como una polilínea/polígono, pero también se les pueden aplicar curvas.
Cómo animar archivos SVG con CSS
Ahora que tiene algunas formas dentro de su SVG, es hora de pasar a la animación CSS. Cada una de las formas tiene una animación diferente para demostrar algunas de las opciones que tiene, pero hay muchas más para explorar con sus propios diseños. El círculo se mueve por la pantalla, las esquinas del cuadrado se vuelven redondas y el triángulo gira. Todos estos utilizan fotogramas clave CSS para crear animaciones fluidas .
Mover el círculo usando Transformar y Trasladar
El círculo en el ejemplo de SVG se mueve desde la parte inferior hasta la parte superior de la pantalla durante su ciclo de animación. Debe asignar una animación al círculo antes de que pueda moverse, a través de una propiedad CSS:
#circle {
animation: circle_anim 2000ms linear infinite normal forwards
}
La primera palabra del valor, circle_anim , es un nombre para la animación. Funciona durante dos segundos ( 2000 ms ). Tiene una curva lineal que mantiene su velocidad constante y está configurada para funcionar un número infinito de veces en la dirección de avance . Puede utilizar fotogramas clave para definir fases individuales de la animación:
@keyframes circle_anim {
0% { transform: translate(155px, 305px) }
45% { transform: translate(155px, -123px) }
50% { transform: translate(-123px, -123px) }
55% { transform: translate(-123px, 728px) }
60% { transform: translate(155px, 728px) }
100% { transform: translate(155px, 305px) }
}
Hay seis fotogramas clave en esta animación, por lo que el círculo se moverá a seis ubicaciones diferentes en cada ciclo. La propiedad transform: translate establece la posición del círculo en cada etapa. Al 0 %, el círculo está en el medio de la pantalla y se mueve hacia arriba y fuera de la vista en un 45 %. En un 50 % se ha movido a la izquierda de la pantalla antes de moverse hacia abajo por debajo de la ventana gráfica en un 55 %. El círculo vuelve a su posición horizontal en un 60 % y la animación se completa al 100 % con el círculo nuevamente en el centro de la pantalla.
Animar la propiedad del radio del borde del cuadrado
El cuadrado del ejemplo ofrece una buena referencia para animaciones de propiedades generales. Siempre que conozca la sintaxis correcta que debe usar, puede animar cualquier propiedad CSS. La propiedad border-radius es una buena demostración de esto. El cuadrado tiene esquinas afiladas que se convierten en esquinas redondeadas y luego nuevamente en esquinas cuadradas.
#square { animation: square_anim 2000ms ease-in-out infinite normal forwards }
La animación cuadrada se llama square_anim y tiene un tiempo de ejecución de dos segundos. La curva de entrada y salida lenta hace que la animación sea más lenta al principio y al final, creando un efecto suave.
@keyframes square_anim {
0% { rx: 0px; ry: 0px }
45% { rx: 40px; ry: 40px }
55% { rx: 40px; ry: 40px }
100% { rx: 0px; ry: 0px }
}
Como puede ver, esta animación tiene cuatro fotogramas clave. El radio del borde X e Y cambia de 0px a 40px entre 0% y 45%, deteniéndose en 40px hasta 55%. Luego vuelve a 0px para cada radio cuando la animación alcanza el 100%.
Rotar el Triángulo SVG con Transformar
La animación SVG final en el ejemplo es la más simple, con el triángulo girando alrededor de su punto central. La forma completa una revolución completa cada dos segundos y continúa funcionando infinitamente. Tiene una curva de salida que hace que la animación se ralentice al final. La animación se llama Triangle_anim.
#triangle { animation: triangle_anim 2000ms ease-out infinite normal forwards }
Esta animación tiene dos fotogramas clave, uno al 0% y otro al 100%. La propiedad Transformar rotar gira el triángulo de 0 grados al 0 % a 360 grados al 100 %, creando un giro completo.
@keyframes triangle_anim {
0% { transform: translate(644px, 297px) rotate(0deg) }
100% { transform: translate(644px, 297px) rotate(360deg) }
}
Cómo animar otras propiedades
Las tres animaciones cubiertas anteriormente son un buen punto de partida cuando trabaja con SVG, pero es probable que desee llevar esto más lejos. Puede usar la regla de animación CSS para ajustar casi cualquier valor de propiedad que pueda asignar a su SVG. Esto incluye valores básicos, como tamaño y posicionamiento, así como valores más avanzados, como bordes, sombras y modos de fusión.
En casos excepcionales en los que CSS no puede hacer el trabajo, puede usar código JavaScript para animar imágenes SVG. Puede encontrar muchas guías que lo ayudarán con esto una vez que se sienta listo para dar el siguiente paso con sus SVG.
Hacer tus propias animaciones SVG
Ya sea que sea un diseñador web, un desarrollador de software o simplemente una persona creativa, las animaciones SVG pueden ser divertidas y satisfactorias de hacer. Puede encontrar muchos recursos en la web que pueden ayudarlo con la animación basada en la web, una vez que se sienta cómodo con los conceptos básicos.
