Animaciones con mejor rendimiento usando KUTE.js: Parte 3, Animando SVG

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En el tutorial anterior de esta serie mostramos cómo animar diferentes propiedades CSS de cualquier elemento mediante KUTE.js. Sin embargo, el motor principal no permite animar propiedades específicas de los elementos SVG. Del mismo modo, no se puede animar la transformación de un SVG compuesto por diferentes formas de trazado o el dibujo de diferentes elementos SVG usando trazos. Tendrás que usar el plugin KUTE.js SVG para lograr cualquiera de estas tareas.

Antes de comenzar, ten en cuenta que tendrás que incluir tanto el motor principal KUTE.js como el plugin SVG para que los ejemplos de este tutorial funcionen.

Transformar formas SVG

Transformar una forma SVG en otra es una característica muy habitual que encontrarás con frecuencia. El plugin KUTE.js SVG nos da todo lo que necesitamos para crear con facilidad nuestras propias animaciones de transformación.

Hay tres maneras de transformar formas SVG usando esta librería:

Puedes usar el método fromTo() para especificar una ruta SVG inicial y otra ruta SVG final para el elemento.
También puedes utilizar el método to() y evitar especificar la ruta inicial. En este caso, el valor inicial para la transformación se determinará en función del valor del atributo d del elemento seleccionado que desees transformar.
Dispones de una opción más, que consiste en pasar directamente la ruta final a la interpolación en forma de cadena. De esta manera, puedes evitar tener dos rutas diferentes en tu SVG.

KUTE.fromTo('#shape-a', {path: '#shape-a' }, { path: '#shape-b' });
KUTE.to('#shape-a', { path: '#shape-b' });

KUTE.fromTo('#shape-a', {path: '#shape-a' }, { path: 'The path of #shape-b as a valid string.' });
KUTE.to('#shape-a', { path: 'The path of #shape-b as a valid string.' });

Durante la inicialización, la librería muestra algunos puntos en función de las rutas de acceso que proporcionamos. Estos puntos se almacenan en dos matrices diferentes. Por último, estas matrices se utilizan para la interpolación. Hay una serie de opciones que puedes configurar para controlar el comportamiento de la transformación de diferentes rutas.

morphPrecision: Como habrás adivinado, esta opción te permite especificar la precisión o fidelidad de la trasformación. Se especifica por medio de una cifra y un valor menor significa mayor precisión. Ten en cuenta que una mayor precisión resultará en mayor fidelidad, pero también perjudicará el rendimiento. Esta opción no se aplica cuando se trata de formas poligonales o rutas donde el atributo d consta únicamente de h, l y v. En tales casos, se utilizan las rutas poligonales originales en lugar de muestrear otras nuevas.
reverseFirstPath: puedes establecer el valor de esta opción en true para invertir la ruta de dibujo de la primera forma. Su valor predeterminado es false.
reverseSecondPath: puedes establecer el valor de esta opción en true para invertir la ruta del dibujo de la segunda forma. Su valor predeterminado también es false.
morphIndex: A veces, los puntos de un trayecto pueden tener que cubrir mucha distancia durante la transformación. Puedes controlar este comportamiento mediante el parámetro morphIndex. Cuando se especifica, este parámetro te permite girar la ruta final de tal manera que todos los puntos viajen la menor distancia posible.

Vamos a usar lo que hemos aprendido hasta ahora para transformar el icono de una batería en el icono de un marcador. Debes tener en cuenta que he utilizado l en minúsculas para especificar la ruta en términos relativos. Este es el código necesario:

1	<path id="battery-a"
2	d="M50,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"/>
3	<path id="bookmark-a"
4	d="M70,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>

El siguiente JavaScript crea el objeto de interpolación e inicia la animación al hacer clic en el botón:

var morphA = KUTE.to(
    '#battery-a', 
    { path: '#bookmark-a' },
    { duration: 5000 }
);

startButton.addEventListener(
  "click",
  function() {
    morphA.start();
  },
  false
);

Aquí hay una demostración del código anterior en acción. También he añadido un elemento extra donde la animación de la transformación establece reverseFirstPath en true. Esto te ayudará a comprender el impacto general de las diferentes opciones de configuración en la transformación. La duración de la animación se ha establecido en 5 segundos para que puedas observar claramente las animaciones y detectar las diferencias.

Please accept marketing cookies to load this content.

En el ejemplo anterior, la ruta principal no tenía ningún subtrazado. Esto hace que la transformación sea muy sencilla. Sin embargo, este podría no ser siempre el caso.

Vamos a añadir una subruta adicional a nuestro marcador, así como el icono de la batería. Si transformas ahora los iconos, verás que solo se anima el primer subtrazado. El segundo subtrazado simplemente desaparece al principio de la animación y vuelve a aparecer al final. La única manera de animar todos los subtrazados en estos casos es cambiar los subtrazados a trazados individuales. Aquí tienes un ejemplo:

1	<!-- Before -->
2	<path id="battery-a"
3	d="M50,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z
4	M70,30 l60,65 l-10,-65 l60,65z"/>
5	<path id="bookmark-a"
6	d="M70,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z
7	M80,80 l30,-45 l30,45 l0,0z"/>
8
9	<!-- After -->
10	<path id="battery-b1"
11	d="M250,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"/>
12	<path id="battery-b2"
13	d="M270,30 l60,65 l-10,-65 l60,65z"/>
14	<path id="bookmark-b1"
15	d="M270,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>
16	<path id="bookmark-b2"
17	d="M280,80 l30,-45 l30,45 l0,0z"/>

Please accept marketing cookies to load this content.

Animar trazos SVG

Otro popular efecto de animación relacionado con SVG consiste en comenzar desde la nada y luego dibujar una forma predefinida usando trazos SVG. Esto se puede utilizar para animar el dibujo de logotipos u otros objetos. En esta sección, aprenderás a usar KUTE.js para crear una impresionante animación para el icono de bicicleta Font Awesome.

Hay tres formas de animar los trazos SVG en KUTE.js. Puedes animar de 0% a 100% estableciendo los valores fromTo como 0% 0% y 0% 100%. También puedes dibujar una parte de la forma del SVG estableciendo los valores en algo así como 0% 5% y 95% 100%. Por último, puedes establecer el valor final en 0% 0% para crear un efecto de borrado en lugar de un efecto de dibujo.

Aquí está el código JavaScript que he utilizado para animar nuestra bicicleta:

var wholeAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 0%" },
  { draw: "0% 100%" },
  { duration: 10000}
);

var partialAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 5%" },
  { draw: "95% 100%" },
  { duration: 10000}
);

var eraseAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 100%" },
  { draw: "0% 0%" },
  { duration: 5000}
);

Como puedes ver en el siguiente ejemplo, no necesitas preocuparte por los distintos subtrazados existentes dentro de una ruta de acceso. KUTE.js animará todos estos subtrazados individualmente sin ningún problema. La duración de la animación se utiliza para determinar el tiempo de la animación de la ruta más larga. La duración del trazo para el resto de los subtrazados se determina en función de su longitud.

Please accept marketing cookies to load this content.

Animar transformaciones SVG

Ya hemos aprendido a animar los valores de transformación CSS en el segundo tutorial de esta serie. El plugin KUTE.js SVG también te permite utilizar el atributo svgTransform para rotar, trasladar, escalar o sesgar diferentes elementos SVG en una página web.

El atributo rotate acepta un único valor que determina el ángulo de rotación. De forma predeterminada, la rotación se produce alrededor del punto central del elemento, pero puedes especificar un nuevo centro de rotación mediante el atributo transformOrigin.

El atributo translate acepta los valores en el formato translate: [x, y] o translate: x. Cuando se proporciona usando un solo valor, se supone que el valor de y es cero.

Para sesgar elementos, tendrás que usar skewX y skewY. No hay soporte para skew[x, y] en SVG. De igual modo, el atributo scale también acepta solo un valor. El mismo valor se utiliza para escalar los elementos en la dirección x e y.

Aquí hay un fragmento de código que aplica todas estas transformaciones en un rectángulo y un círculo.

var rotation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { rotate: 360 } },
  { repeat: 1, yoyo: true }
);

var scaling = KUTE.allTo(
  "rect, circle",
  { svgTransform: { scale: 1.5 } },
  { repeat: 1, yoyo: true }
);

var translation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { translate: [100, -50] } },
  { repeat: 1, yoyo: true }
);

var skewing = KUTE.allTo(
  "rect, circle",
  { svgTransform: { skewX: 25 } },
  { repeat: 1, yoyo: true }
);

He establecido el parámetro yoyo en true para que después de reproducir la animación en sentido inverso, las propiedades de transformación se establezcan en su valor inicial. De esta manera, podemos reproducir las animaciones una y otra vez haciendo clic en los botones.

Si pulsas el botón Rotate en la demostración, notarás que no parece tener ningún efecto en el círculo. Para observar la rotación del círculo, tendrás que aplicar una transformación de sesgo en él con el fin de cambiar su forma y luego hacer clic de inmediato sobre Rotate.

Please accept marketing cookies to load this content.

Reflexiones finales

Comenzamos este tutorial cubriendo los conceptos básicos de las tranformaciones en formato SVG y la animación de trazos. Aprendiste a transformar correctamente trazados complejos que tienen subtrazados y cómo podemos crear un efecto de borrado de un trazo en lugar de su dibujo eligiendo los valores correctos para el atributo draw. Después de esto, discutimos cómo podemos usar el atributo svgTransform para animar diferentes transformaciones.

En varios tutoriales, hemos comprobado la potencia alcanzada por JavaScript. No está exento de curvas de aprendizaje, y también existen un montón de marcos y librerías para mantenerte ocupado. Si estás buscando más recursos para estudiar o usar en tu trabajo, echa un vistazo a lo que tenemos disponible en Envato Market.

El tutorial estaba concebido a modo de presentación de todas las características del plugin KUTE.js SVG y como ayuda para que puedas empezar rápidamente. Puedes obtener más información sobre el plugin SVG leyendo la documentación.