() translation by (you can also view the original English article)
En este tutorial, vas a aprender cómo hacer un icono de carga muy simple utilizando animaciones SVG. Lo que cubriremos es diferente de las animaciones CSS: las animaciones SVG se encuentran en el "markup" SVG real. Comencemos echando un vistazo a la sintaxis.
Mira el Screencast
Un repaso rápido en la codificación manual SVG
Antes de seguir, si necesitas recordar los conceptos básicos de SVG con codificación manual, Kezz te puede auxiliar:
La sintaxis
La mayor parte de los navegadores modernos soportan la animación de SVG utilizando algo llamado "SMIL", que significa "Lenguaje de Integración Multimedia Sincronizado". Este lenguaje te permite animar ciertos atributos fundacionales y transformacionales de un SVG. Por ejemplo, puedes animar las posiciones X-Y, una transformación de rotación o el color de relleno de un elemento. Veamos dos ejemplos que te ayudarán a entender los conceptos básicos.
Ejemplo 1
Para nuestro primer ejemplo, empezamos con un elemento <svg>, que tiene atributos width, height y viewBox establecidos.
1 |
<svg width="500px" height="500px" viewBox="0 0 500 500"> |
2 |
</svg>
|
A continuación colocamos un rectángulo, con algunos valores de posicionamiento, dimensiones y un color de relleno dentro de él.
1 |
<svg width="500px" height="500px" viewBox="0 0 500 500"> |
2 |
|
3 |
<rect x="0" y="0" width="100" height="100" fill="#feac5e"> |
4 |
</rect>
|
5 |
|
6 |
</svg>
|
Para animar este rectángulo, vamos a usar un elemento de auto cierre <animate />, dentro de <react>.
Dentro de ese <animate /> añadimos algunos atributos, primero utilizando <attributeName> para definir cuál de los atributos de <react> queremos animar (en este caso la posición x).
Luego definimos un valor from y un valor to. Utilizamos dur para especificar una duración, y repeatCount para establecer qué tipo de repetición queremos que tenga la animación.
1 |
<svg width="500px" height="500px" viewBox="0 0 500 500"> |
2 |
|
3 |
<rect x="0" y="0" width="100" height="100" fill="#feac5e"> |
4 |
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> |
5 |
</rect>
|
6 |
|
7 |
</svg>
|
¡Eso es! Verás en nuestra demostración que ahora tenemos un elemento de animación dentro de un SVG.
Además podemos animar más de un atributo en nuestro rectángulo; todo lo que necesitamos es añadir otro <animate /> que especifique otro atributo. Animemos el ancho también:
1 |
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> |
2 |
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" /> |
¿Qué tal un tercero? También vamos a cambiar su color de relleno .
1 |
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> |
2 |
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" /> |
3 |
<animate attributeName="fill" to="black" dur="2s" repeatCount="indefinite" /> |
Ejemplo 2
El segundo ejemplo animará un atributo transform. Iniciaremos con el mismo <svg>, pero con un levemente distinto <react>:
1 |
<svg width="500px" height="500px" viewBox="0 0 500 500"> |
2 |
|
3 |
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8"> |
4 |
</rect>
|
5 |
|
6 |
</svg>
|
Esta vez, en lugar de añadir un elemento <animate />, vamos a agregar un elemento <animateTransform>. Sus propiedades se dirigen a un attributeName, luego preguntan por el type de transformación. Podemos utilizar begin para especificar cuándo debe comenzar la animación, dur para la duración, luego especificar sus coordenadas en forma de tres valores: ángulo, x y ángulo y. En nuestro caso, estamos utilizando estas coordenadas para especificar una transformación rotacional.
1 |
<svg width="500px" height="500px" viewBox="0 0 500 500"> |
2 |
|
3 |
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8"> |
4 |
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" /> |
5 |
</rect>
|
6 |
|
7 |
</svg>
|
Al igual que en nuestro ejemplo previo, podemos añadir más elementos <animateTransform /> para animar más de una propiedad. Sin embargo, en el caso de las transformaciones, solo podemos ejecutarlas en secuencia; no es posible animar múltiples propiedades al mismo tiempo.
Prueba tú mismo, agregando una segunda animación apuntando a scale :
1 |
<animateTransform attributeName="transform" type="scale" begin="0s" dur="3s" values="1,1; 2,2; 1,1" repeatCount="indefinite" /> |
Estos dos ejemplos te han mostrado los conceptos básicos para trabajar con animaciones SVG. Vamos a utilizar lo que hemos aprendido para crear una animación de carga.
Creando un icono de carga animado
Los iconos de carga pueden tener cualquier forma; en realidad, el límite es nuestra imaginación. Voy a mostrarte dos ejemplos, que espero sirvan de inspiración para que hagas realidad tus propias ideas.
Ejemplo 1
Para nuestro primer ejemplo, empezaré con el siguiente <svg> :
1 |
<svg width="51px" height="50px" viewBox="0 0 51 50"> |
2 |
</svg>
|
Ahora agreguemos tres rectángulos, que en última instancia cambiarán su altura para sugerir que algo se está cargando. Aquí está el primero:
1 |
<svg width="51px" height="50px" viewBox="0 0 51 50"> |
2 |
|
3 |
<rect y="0" width="13" height="50" fill="#1fa2ff"> |
4 |
<animate attributeName="height" values="50;10;50" begin="0s" dur="1s" repeatCount="indefinite" /> |
5 |
</rect>
|
6 |
|
7 |
</svg>
|
Y aquí están los otros dos junto con él: notarás que son idénticos, pero tienen diferentes colores de relleno, son desplazados a lo largo del eje x y tienen animaciones levemente retrasadas:
1 |
<svg width="51px" height="50px" viewBox="0 0 51 50"> |
2 |
|
3 |
<rect y="0" width="13" height="50" fill="#1fa2ff"> |
4 |
<animate attributeName="height" values="50;10;50" begin="0s" dur="1s" repeatCount="indefinite" /> |
5 |
</rect>
|
6 |
|
7 |
<rect x="19" y="0" width="13" height="50" fill="#12d8fa"> |
8 |
<animate attributeName="height" values="50;10;50" begin="0.2s" dur="1s" repeatCount="indefinite" /> |
9 |
</rect>
|
10 |
|
11 |
<rect x="38" y="0" width="13" height="50" fill="#06ffcb"> |
12 |
<animate attributeName="height" values="50;10;50" begin="0.4s" dur="1s" repeatCount="indefinite" /> |
13 |
</rect>
|
14 |
|
15 |
</svg>
|
¡Eso nos da una muy buena animación de carga! Vamos a mejorarlo ligeramente también animando la posición y de cada rectángulo. Para hacer eso, necesitamos añadir tres elementos <animate /> más:
Ejemplo 3
Este último ejemplo es un poco más complejo, porque implica crear el SVG en otro programa, luego copiarlo en un editor de código y después animar sus propiedades.
Vamos a empezar, sin embargo, en un territorio familiar, codificando a mano un <svg>::
1 |
<svg width="50" height="50" viewBox="0 0 50 50"> |
2 |
|
3 |
</svg>
|
A nuestro <svg> le agregamos un <path> con algunos atributos básicos:
1 |
<svg width="50" height="50" viewBox="0 0 50 50"> |
2 |
<path fill="#c779d0" d=""></path> |
3 |
</svg>
|
Para los contenidos de nuestra d (que define cómo se dibuja la ruta) vamos a necesitar un poco de ayuda, así que inicia Adobe Illustrator y empieza a dibujar (o solamente copia el siguiente código)
1 |
<svg width="50" height="50" viewBox="0 0 50 50"> |
2 |
<path fill="#c779d0" d="M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z"></path> |
3 |
</svg>
|
Ahora vamos a animar nuestro <path> girandolo, como hicimos en nuestro ejemplo anterior. Agregamos el siguiente <animateTransform />
1 |
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" repeatCount="indefinite" /> |
¡Eso es! Ahora tenemos una animación de carga giratoria simple. ¡Mira qué mejoras puedes hacerle!
Conclusión
En este tutorial iniciamos con los conceptos básicos, aprendiendo a utilizar el elemento <animate> dentro de un simple SVG codificado a mano. Después creamos sobre eso introduciendo el elemento <animateTransform />. Posteriormente, tomamos lo que habíamos aprendido y creamos nuestro propio ícono de carga animado. Por último, creamos otro, pero utilizando el elemento más complejo que generamos <path> con la ayuda de Adobe Illustrator.
Estos pasos deberían haberte dado una comprensión sólida de cómo funciona la animación SVG. ¡Espero verte en el próximo tutorial!
Enlaces útiles
- SVG SMIL en caniuse.com
- Animación SVG con SMIL por Mozilla
- Cargadores SVG por Sam Herbert
- Íconos de carga SVG en CodePen, por Aurer
