Animaciones con mejor rendimiento usando KUTE.js: Parte 1, Introducción

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

KUTE.js es un motor de animación basado en JavaScript que se centra en el rendimiento y la eficiencia de la memoria mientras anima diferentes elementos en una página web. Ya he escrito una serie de artículos sobre el uso de Anime.js para crear animaciones basadas en JavaScript. Esta vez aprenderemos sobre KUTE.js y cómo podemos usarlo para animar propiedades CSS, SVG y elementos de texto, entre otras cosas.

Instalación

Antes de profundizar en algunos ejemplos, vamos a instalar primero la librería. KUTE.js tiene un motor principal, y luego hay plugins para animar el valor de diferentes propiedades CSS, atributos SVG o texto. Puedes vincular directamente a la librería desde CDNs populares como cdnjs y jsDelivr.

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js"></script>
2	<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script>

También puedes instalar KUTE.js utilizando NPM o Bower con la ayuda de los siguientes comandos:

1	npm install --save kute.js
2	bower install --save kute.js

Una vez hayas incluido la librería en tus proyectos, podrás empezar a crear tus propias secuencias de animación.

Interpolar objetos

Al crear tu animación con KUTE.js, debes definir objetos de instrucción. Estos objetos de interpolación proporcionan toda la información relacionada con la animación para un elemento o elementos determinados. Esto incluye el propio elemento, las propiedades que deseas animar, la duración de la animación y otros atributos como el recuento de iteraciones, el retraso o el desplazamiento.

Puedes utilizar el método .to() o el método .fromTo() para animar un conjunto de propiedades CSS de un valor a otro. El método .to() anima las propiedades de su valor predeterminado o su valor calculado/actual a un valor final proporcionado. En el caso del método .fromTo(), debes proporcionar los valores de animación inicial y final.

El método .to() es útil cuando no conoces el valor actual o predeterminado de la propiedad que deseas animar. Una desventaja importante de este método es que la librería tiene que calcular el valor actual de todas las propiedades por sí misma. Esto da como resultado un retraso de unos milisegundos después de invocar .start() para iniciar la animación.

El método .fromTo() te permiten especificar, por ti mismo, los valores de animación inicial y final. Esto puede mejorar marginalmente el rendimiento de las animaciones. Aquí también puedes especificar las unidades para los valores iniciales y finales y evitar cualquier sorpresa durante el transcurso de la animación. Una desventaja de usar .fromTo() es que no podrás apilar varias propiedades de transformación en tablas encadenadas. En tales casos, tendrás que utilizar el método .to().

Recuerda que tanto .fromTo() como .to() están diseñados para usarse cuando se animan elementos individuales. Si deseas animar varios elementos a la vez, tendrás que utilizar .allTo() o .allFromTo(). Estos métodos funcionan igual que sus homólogos de un solo elemento y heredan todos sus atributos. También obtienen un atributo offset adicional que determina el retraso entre el inicio de la animación para distintos elementos. Este desplazamiento se define en milisegundos.

Este es un ejemplo que anima la opacidad de tres cuadrados diferentes en secuencia.

Please accept marketing cookies to load this content.

El siguiente JavaScript se utiliza para crear la secuencia de animación anterior:

var theBoxes = document.querySelectorAll(".box");
var startButton = document.querySelector(".start");

var animateOpacity = KUTE.allFromTo(
  theBoxes,
  { opacity: 1 },
  { opacity: 0.1 },
  { offset: 700 }
);

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

Todos los cuadrados anteriores tienen una clase box que se ha utilizado para seleccionarlos todos utilizando el método querySelectorAll(). El método allFromTo() en KUTE.js se utiliza para animar la opacidad de estos cuadros de 1 a 0,1 con un tiempo entre una y otra de 700 milisegundos. Como puedes ver, el objeto de interpolación no inicia la animación por sí mismo. Tienes que llamar al método start() para hacerlo.

Control de la reproducción de la animación

En la sección anterior, usamos el método start() para iniciar nuestras animaciones. La librería KUTE.js también proporciona algunos otros métodos que se pueden utilizar para controlar la reproducción de la animación.

Por ejemplo, puedes detener cualquier animación que esté actualmente en curso con la ayuda del método stop(). Ten en cuenta que puedes usar este método para detener la animación solo de los objetos que se han almacenado en una variable. La animación de cualquier objeto de interpolación que se haya creado sobre la marcha no se puede detener usando este método.

También puedes simplemente pausar una animación con la ayuda del método pause(). Esto es útil cuando deseas reanudar la animación de nuevo en un momento posterior. Puedes usar resume() o play() para reanudar cualquier animación que se haya pausado.

El ejemplo siguiente es una versión actualizada de la demostración anterior a la que hemos añadido los cuatro métodos.

Please accept marketing cookies to load this content.

Aquí está el código JavaScript necesario para agregar la funcionalidad de inicio, parada, reproducción y pausa.

var theBoxes = document.querySelectorAll(".box");
var startButton = document.querySelector(".start");
var stopButton = document.querySelector(".stop");
var pauseButton = document.querySelector(".pause");
var resumeButton = document.querySelector(".resume");

var animateOpacity = KUTE.allFromTo(
  theBoxes,
  { opacity: 1 },
  { opacity: 0.1 },
  { offset: 700, duration: 2000 }
);

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

stopButton.addEventListener(
  "click",
  function() {
    animateOpacity.stop();
  },
  false
);

pauseButton.addEventListener(
  "click",
  function() {
    animateOpacity.pause();
  },
  false
);

resumeButton.addEventListener(
  "click",
  function() {
    animateOpacity.resume();
  },
  false
);

He cambiado la duración de la animación a 2.000 milisegundos. Esto nos proporciona suficiente tiempo para presionar diferentes botones y ver cómo afectan a la reproducción de la animación.

Encadenar juntas interpolaciones

Puedes utilizar el método chain() para encadenar diferentes interpolaciones. Una vez se hayan encadenado diferentes interpolaciones, invocan el método start() en otras interpolaciones una vez haya terminado su propia animación.

De esta manera, podrás reproducir diferentes animaciones en secuencia. Puedes encadenar diferentes interpolaciones entre sí para reproducirlas en bucle. El siguiente ejemplo lo clarifica:

var animateOpacity = KUTE.allFromTo(
  theBoxes,
  { opacity: 1 },
  { opacity: 0.1 },
  { offset: 100, duration: 800 }
);

var animateRotation = KUTE.allFromTo(
  theBoxes,
  { rotate: 0 },
  { rotate: 360 },
  { offset: 250, duration: 800 }
);

opacityButton.addEventListener(
  "click",
  function() {
    animateOpacity.start();
  },
  false
);

rotateButton.addEventListener(
  "click",
  function() {
    animateRotation.start();
  },
  false
);

chainButton.addEventListener(
  "click",
  function() {
    animateOpacity.chain(animateRotation);
    animateOpacity.start();
  },
  false
);

loopButton.addEventListener(
  "click",
  function() {
    animateOpacity.chain(animateRotation);
    animateRotation.chain(animateOpacity);
    animateOpacity.start();
  },
  false
);

Ya teníamos una interpolación que anima la opacidad. Ahora hemos añadido otra que anima la rotación de nuestros cuadrados. Los dos primeros botones animan la opacidad y la rotación de uno en uno. El tercer botón desencadena el encadenamiento de animateOpacity con animateRotation.

El encadenamiento en sí no inicia la animación, por lo que también usamos el método start() para iniciar la animación de opacidad. El último botón se utiliza para encadenar las dos interpolaciones entre sí. Esta vez, las animaciones siguen reproduciéndose indefinidamente una vez que se han iniciado. Aquí tienes una demostración de CodePen que muestra todo el código anterior en acción:

Please accept marketing cookies to load this content.

Para entender completamente cómo funciona el encadenamiento, tendrás que presionar los botones en una secuencia específica. Primero haz clic en el botón Animate Opacity y verás que la animación de opacidad se reproduce una sola vez y después no pasa nada más. Ahora, pulsa el botón Animate Rotación y verás que los cuadrados giran una vez y después no pasa nada más.

Después de eso, presiona el botón Chain Animations y verás que la animación de opacidad se reproduce primero y, una vez que completa su iteración, la animación de rotación comienza a reproducirse por sí sola. Esto ocurre porque la animación de rotación ahora está encadenada a la animación de opacidad.

Ahora, pulsa el botón Animate Opacity de nuevo y verás que tanto la opacidad como la rotación se animan secuencialmente. Esto se debe a que ya habían sido encadenados antes de haber hecho clic en Chain Animations.

En este punto, al pulsar el botón Animate Rotation solo se animará la rotación. La razón de este comportamiento es que solo hemos encadenado la animación de rotación a la animación de opacidad. Esto significa que los cuadrados rotarán cada vez que se anime la opacidad, pero una animación de rotación no significa que la opacidad también se anime.

Por último, puedes hacer clic en el botón Play in a Loop. Esto encadenará las animaciones entre sí, y una vez que eso suceda, las animaciones seguirán reproduciéndose en un bucle indefinido. Esto se debe a que el final de una animación desencadena el inicio de la otra animación.

Reflexiones finales

En este tutorial introductorio de KUTE.js, aprendiste sobre los conceptos básicos de la librería. Empezamos con la instalación y luego pasamos a diferentes métodos que puedes usar para crear objetos de interpolación.

También has aprendido a controlar la reproducción de una animación y a encadenar diferentes interpolaciones. Una vez entiendas completamente el encadenamiento, podrás crear interesantes animaciones con esta librería.

En el siguiente tutorial de esta serie, aprenderás a animar diferentes tipos de propiedades CSS mediante KUTE.js.