Cómo utilizar "animateTransform" para la animación SVG en línea

Hoy vamos a avanzar a través de los conceptos básicos de utilizar animateTransform para generar animaciones en línea con SVG (gráficos vectoriales escalables).

Si eres nuevo en SVG te recomendamos que consultes Introducción a los gráficos vectoriales escalables (SVG) para que tengas la velocidad.

Las técnicas que aprenderás te permitirán crear animaciones de iconos e imágenes sofisticadas sin un solo GIF, JPEG o PNG, con cero JavaScript y sin el más mínimo susurro de Flash.

Las animaciones que cree serán fáciles de editar más tarde porque son código puro, y los resultados sólo ocuparán un par de KB de precioso ancho de banda cuando se visualicen.

Antes de que comencemos

Para animar las formas SVG primero necesitará la capacidad de crearlas. He encontrado la manera más fácil de crear SVGs es usar el Sketch de Bohemian Coding. Si no es propietario de Sketch, puede obtener una prueba gratuita de 30 días para los propósitos de este tutorial.

Estaremos manipulando el código SVG, así que después de haber dibujado una forma en Sketch, cree una porción alrededor de ella y exporte esa porción como un archivo SVG.

A continuación, podrá abrir el archivo exportado en un editor de código (como Sublime Text) y copiar el código SVG desde dentro. Todo lo que necesitas es el código de la etiqueta de apertura <svg> a la etiqueta de cierre </svg>.

Por ejemplo, Sketch genera el siguiente código SVG para el rectángulo azul que se muestra arriba:

1

<svg width="100px" height="125px" viewBox="0 0 100 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->

3

    <title>Slice 2</title>

4

    <desc>Created with Sketch.</desc>

5

    <defs></defs>

6

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

7

        <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>

8

    </g>

9

</svg>

Para hacer el código visualmente más fácil de trabajar, haremos un par de pequeños cambios en el código.

Establezca el ancho width y la altura height del elemento svg al 100% y elimine la configuración viewBox. También elimine el comentario Generator, y los elementos title, desc, defs y g.

Debe terminar con algo como esto:

1

<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>

3

</svg>

Ponga ese código en un documento HTML y, cuando se vea en el navegador, debe ver el mismo rectángulo azul en su página como vio en Sketch:

Nota: La imagen anterior incluye un eje X e Y en el fondo, ya que necesitará entenderlos para crear sus animaciones. Aprenderás por qué en breve.

¿Qué hace "animateTransform"?

La respuesta breve es que el elemento animateTransform genera animaciones estableciendo propiedades de transformación en la forma SVG a la que se aplica.

Dado que, la siguiente pregunta lógica es:

Bien, ¿qué hace "Transform"?

Agregar ajustes transform a una forma le permite modificar cómo aparece esa forma en el espacio 2D. Hay cinco tipos diferentes de transformación que puede realizar:

1. translate
   
2. scale
   
3. rotate
   
4. skewX
   
5. skewY

El atributo animateTransform te permite animar entre diferentes estados de transformación, por lo que antes de empezar a animar es importante comprender cómo funcionan las transformaciones.

Transformaciones y Espacio 2D

Debido a que las transformaciones operan en el espacio 2D, todas sus configuraciones se relacionan con las coordenadas X e Y trazadas en un eje X / Y, tal como se vio antes en nuestro rectángulo azul.

• El eje X es la línea horizontal en el espacio 2D, y el eje Y es la línea vertical. De forma predeterminada, cada forma comienza en una posición de 0 en ambos ejes X e Y.
• A partir de la posición 0 en el eje X, los valores positivos corresponden con el movimiento hacia la derecha, y los valores negativos corresponden con el movimiento hacia la izquierda.
• Desde la posición 0 en el eje Y, los valores positivos corresponden al movimiento hacia abajo, y los valores negativos corresponden al movimiento hacia arriba.

Si esto no tiene sentido completo, no se preocupe, ya que se hará mucho más claro al ver los ejemplos de cada tipo de transformación a continuación.

No se preocupe por el código de estas transformaciones, ya que cubriremos que cuando nos movemos a crear animaciones. Para empezar, sólo quiero que obtengas lo esencial sobre lo que realmente hacen los cinco tipos de transformación.

Translate

Esto cambia la posición de la forma en el eje X (horizontal) y en el eje Y (vertical).

Por ejemplo, aquí está nuestro rectángulo azul con valores de translate de 150 en el eje X (horizontal) y 20 en el eje Y (vertical):

Recuerde en la sección anterior que los valores positivos en el eje X corresponden con el movimiento hacia la derecha, y los valores positivos en el eje Y corresponden con el movimiento hacia abajo.

Al establecer el valor translate para X en positivo 150, nuestro rectángulo se ha movido a la derecha por 150 píxeles. Ajustar el valor de Y a positivo 20 ha desplazado nuestro rectángulo hacia abajo en 20 píxeles.

Scale

Esto multiplica el tamaño general de la forma en el eje X (ancho) y el eje Y (altura).

Los ajustes de escala funcionan como multiplicadores del tamaño original de la forma. Por ejemplo, si fijamos la escala X a 3, la forma sería tres veces más amplia. Si fijamos la escala de Y a 1,25, la forma sería una y un cuarto más alta, así:

Rotate

Esto gira la forma alrededor de un punto dado por grados.

La rotación funciona estableciendo el número de grados por los que desea girar la forma. Por ejemplo, aquí está nuestro rectángulo girado en 45 grados:

De forma predeterminada, la forma girará alrededor de su esquina superior izquierda, pero también puede hacer que gire alrededor de un punto diferente. Cubriremos cómo se hace esto más adelante en el tutorial.

SkewX

Esto distorsiona la forma a lo largo del eje X (horizontal).

La inclinación a lo largo del eje X también funciona en grados. Por ejemplo, en la imagen de abajo nuestro rectángulo está sesgado 20 grados en el eje X:

SkewY

Esto distorsiona la forma a lo largo del eje Y (vertical) por grados.

SkewY trabaja exactamente de la misma manera que SkewX, sólo la transformación sucede verticalmente a lo largo del eje Y así:

Animación de las transformaciones

Ahora que ya sabes lo que las transformaciones realmente hacen, puedes empezar a crear animaciones entre diferentes estados de transformación. El proceso básico tiene tres pasos:

1. Establecer un estado inicial de transformación: el estado from.
   
2. Establecer un segundo estado de transformación: el estado to.
   
3. Establezca el tiempo y la repetición para una transición animada entre el estado from y el estado to.

Esto se entiende mejor a través de un ejemplo práctico, así que comencemos por animar una transformación translate.

Animación de transformaciones Translate

Recuerda que antes comenzamos con nuestro rectángulo azul en su posición por defecto de 0 0, es decir, 0 en el eje X y 0 en el eje Y. Estableceremos esta posición como nuestro estado from .

A continuación, se observó un ejemplo de ese mismo rectángulo azul con ajustes de translación de 150 20 aplicados, es decir, 150 en el eje X y 20 en el eje Y. Estableceremos esta posición como nuestro estado to .

Usando animateTransform podemos hacer que el rectángulo se deslice suavemente entre los estados from y to en un período de dos segundos.

Su forma SVG, en este caso rectángulo, necesitará tener etiquetas de apertura y cierre, p. <rect></rect>.

El atributo animateTransform debe colocarse entre estas etiquetas de la siguiente manera:

1

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

2

    <animateTransform attributeName="transform"

3

      type="translate"

4

      from="0 0"

5

      to="150 20"

6

      begin="0s"

7

      dur="2s"

8

      repeatCount="indefinite"

9

    />

10

  </rect>

Echa un vistazo a las propiedades que se han establecido en la etiqueta animateTransform. Estos son los que controlan cómo se ejecuta la animación.

Hemos establecido el tipo type a translate, lo que significa que vamos a aplicar un tipo de transformación translate . Como está previsto, hemos establecido nuestra posición 0 0 en el estado from, y nuestra posición 150 20 en el estado to.

El valor para begin se establece en 0s, lo que significa que la animación comenzará cero segundos después de la carga, y dur se establece en 2s, lo que significa que la animación se ejecutará durante un período de dos segundos. Finalmente, hemos incluido repeatCount establecido en indefinido indefinite, lo que significa que la animación se reproducirá en bucle.

Esto nos da la siguiente animación:

Animando otras transformaciones

El proceso es exactamente el mismo para girar los cuatro tipos de transformaciones. Después de establecer el valor de type en cualquier tipo de transformación que desee, introduzca valores para los estados de transformación from y to.

Por ejemplo, podemos utilizar las siguientes configuraciones de animateTransform para escalar nuestro rectángulo hasta el tamaño que vio en la sección anterior sobre transformación de escala:

1

    <animateTransform attributeName="transform"

2

      type="scale"

3

      from="1 1"

4

      to="3 1.25"

5

      begin="0s"

6

      dur="2s"

7

      repeatCount="0"

8

    />

Debido a que los ajustes de transformación de escala multiplican el tamaño original de la forma, comenzamos con un valor de 1 1 en el from. Hacer esto establece su tamaño original en una multiplicación de 1.

Nuestro ajuste to de 3 1,25 animará nuestra transformación de escala hasta tres veces la anchura original en el eje X y una y un cuarto de la altura original en el eje Y.

Nota: Usted encontrará que sus animaciones reales en el navegador funcionan mucho más suavemente que el GIF de captura de pantalla que usted ve arriba.

Animar múltiples transformaciones

También podemos combinar las dos animaciones que hemos creado hasta ahora, tanto para translate y escalar al mismo tiempo. Sólo puede utilizar una única etiqueta animateTransform dentro de su etiqueta rect, por lo que para utilizar múltiples animaciones tendrá que incorporar un conjunto de etiquetas g, que representan un grupo de objetos SVG.

Para que esto funcione, agregue etiquetas de apertura y cierre <g></g> alrededor de las etiquetas rect existentes:

1

  <g>

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

3

    <animateTransform attributeName="transform"

4

      type="scale"

5

      from="1 1"

6

      to="3 1.25"

7

      begin="0s"

8

      dur="2s"

9

      repeatCount="0"

10

    />

11

  </rect>

12

  </g>

A continuación, agregue su segunda animación fuera de la etiqueta de cierre </rect>, pero antes de la etiqueta de cierre </g>. En este caso vamos a reintroducir nuestra transformación  translate:

1

  <g>

2

  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125">

3

    <animateTransform attributeName="transform"

4

      type="scale"

5

      from="1 1"

6

      to="3 1.25"

7

      begin="0s"

8

      dur="2s"

9

      repeatCount="0"

10

    />

11

  </rect>

12

  <animateTransform attributeName="transform" type="translate" from="0 0" to="150 20" begin="0s" dur="2s" repeatCount="0" />

13

  </g>

Ahora tenemos ambas transformaciones de escala y translación animando simultáneamente:

Puede utilizar animateTransform una vez por cada forma o grupo. Si necesita agregar más animaciones, envuelva otro conjunto de etiquetas de grupo alrededor de su código y anote su etiqueta animateTransform adicional dentro de él.

Echemos un vistazo a los tres tipos de transformación restantes, cada uno creado cambiando sólo los ajustes type, from y to, y también combinado con nuestra animación de traducción original.

Animación de rotación (más traslacion)

En este ejemplo, el type se ha establecido en rotate, from se ha establecido en 0 para comenzar sin rotación y to se ha establecido en 45, de modo que giramos 45 grados en dos segundos:

Animación SkewX y SkewY (más Traslación)

En las siguientes dos animaciones, type se ha establecido en skewX y skewY respectivamente, from se establece en 0 para comenzar sin torcer, y to se ha establecido en 20, de modo que nos desviamos en 20 grados en dos segundos:

Ejemplo práctico: Icono de carga

Hay un número infinito de posibilidades para las animaciones que se pueden crear usando estas técnicas básicas, pero una de las más inmediatas es la creación de iconos de carga en los que anteriormente se podía confiar en GIF animados.

Este es un icono de carga que he creado en unos cinco minutos usando Sketch:

Entonces lo exporté a un archivo SVG que me dio el siguiente código:

1

<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

2

    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->

3

    <title>loader01 2</title>

4

    <desc>Created with Sketch.</desc>

5

    <defs></defs>

6

    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

7

        <g id="Group-3" sketch:type="MSLayerGroup" fill="#4990E2">

8

            <rect id="Rectangle-1" sketch:type="MSShapeGroup" x="16.5873418" y="0" width="3" height="9.13705584"></rect>

9

            <rect id="Rectangle-2" fill-opacity="0.58" sketch:type="MSShapeGroup" x="16.678481" y="26.8629442" width="3" height="9.13705584"></rect>

10

            <rect id="Rectangle-4" fill-opacity="0.79" sketch:type="MSShapeGroup" transform="translate(31.530380, 17.954315) rotate(-270.000000) translate(-31.530380, -17.954315) " x="30.0303797" y="13.3857868" width="3" height="9.13705584"></rect>

11

            <rect id="Rectangle-3" fill-opacity="0.37" sketch:type="MSShapeGroup" transform="translate(4.735443, 18.045685) rotate(-270.000000) translate(-4.735443, -18.045685) " x="3.23544304" y="13.4771574" width="3" height="9.13705584"></rect>

12

            <rect id="Rectangle-4" fill-opacity="0.72" sketch:type="MSShapeGroup" transform="translate(29.758244, 24.676171) rotate(-240.000000) translate(-29.758244, -24.676171) " x="28.2582441" y="20.1076435" width="3" height="9.13705584"></rect>

13

            <rect id="Rectangle-3" fill-opacity="0.3" sketch:type="MSShapeGroup" transform="translate(6.507579, 11.323829) rotate(-240.000000) translate(-6.507579, -11.323829) " x="5.00757864" y="6.75530065" width="3" height="9.13705584"></rect>

14

            <rect id="Rectangle-4" fill-opacity="0.65" sketch:type="MSShapeGroup" transform="translate(24.871110, 29.609153) rotate(-210.000000) translate(-24.871110, -29.609153) " x="23.37111" y="25.0406255" width="3" height="9.13705584"></rect>

15

            <rect id="Rectangle-3" fill-opacity="0.23" sketch:type="MSShapeGroup" transform="translate(11.394713, 6.390847) rotate(-210.000000) translate(-11.394713, -6.390847) " x="9.89471277" y="1.82231869" width="3" height="9.13705584"></rect>

16

            <rect id="Rectangle-4" fill-opacity="0.51" sketch:type="MSShapeGroup" transform="translate(11.473642, 29.654839) rotate(-150.000000) translate(-11.473642, -29.654839) " x="9.97364166" y="25.0863108" width="3" height="9.13705584"></rect>

17

            <rect id="Rectangle-3" fill-opacity="0.93" sketch:type="MSShapeGroup" transform="translate(24.792181, 6.345161) rotate(-150.000000) translate(-24.792181, -6.345161) " x="23.2921811" y="1.77663341" width="3" height="9.13705584"></rect>

18

            <rect id="Rectangle-4" fill-opacity="0.44" sketch:type="MSShapeGroup" transform="translate(6.553148, 24.755301) rotate(-120.000000) translate(-6.553148, -24.755301) " x="5.05314826" y="20.1867727" width="3" height="9.13705584"></rect>

19

            <rect id="Rectangle-3" fill-opacity="0.86" sketch:type="MSShapeGroup" transform="translate(29.712675, 11.244699) rotate(-120.000000) translate(-29.712675, -11.244699) " x="28.2126745" y="6.67617143" width="3" height="9.13705584"></rect>

20

        </g>

21

    </g>

22

</svg>

Dado que este icono abarca varias formas dentro de un grupo, y como hemos aprendido de arriba puedes aplicar animateTransform a un grupo, agregué mi código de animación antes de la última etiqueta de cierre </g>:

1

        </g>

2

        <animateTransform attributeName="transform"

3

      	type="rotate"

4

    		from="0 18 18"

5

    		to="360 18 18"

6

    		begin="0s"

7

    		dur="0.85s"

8

    		repeatCount="indefinite"

9

    	/>

10

    </g>

11

</svg>

El código anterior establece el icono para girar de 0 a 360 grados, es decir, un círculo completo.

Revolver el eje

Tenga en cuenta que esta vez también he incluido un extra de dos números en la configuración from y to. Esto le indica a la animación que gire alrededor de un punto del eje X / Y interno de la forma 18 18, es decir, el centro de la forma dado que tiene 36x36 píxeles de tamaño.

Esto produce la siguiente animación:

Una vez más, su animación en el navegador será más suave que el anterior GIF, así que asegúrese de comprobar la cosa real. Como puedes ver, es muy rápido y fácil de juntar animaciones de las que puedes obtener un sólido uso práctico.

Concluyendo

Si aún no has tomado una corrida en la animación SVG ahora deberías tener las herramientas que necesitas para conseguir un buen inicio sólido.

Otras lecturas

• Gran ejemplo en Codepen de cargadores animados SVGs
• Más información sobre cómo funciona animateTransform en W3C.
• ¡Coge una copia de la fuente para este tutorial, juega con los ejemplos y diviértete creando tus propias animaciones SVG en línea!