Share
KUTE.js es un motor de animación basado en JavaScript que se centra en el rendimiento y la eficiencia de la memoria al tiempo que anima diferentes elementos en una página web. Ya he escrito una serie 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..
Antes de profundizar en algunos ejemplos, primero instalemos la biblioteca. KUTE.js tiene un motor central, y luego hay complementos para animar el valor de diferentes propiedades CSS, atributos SVG o texto. Puede enlazar directamente a la biblioteca desde CDN populares como cdnjs y jsDelivr.
También puede instalar KUTE.js usando NPM o Bower con la ayuda de los siguientes comandos:
npm install --save kute.js bower install --save kute.js
Una vez que haya incluido la biblioteca en sus proyectos, puede comenzar a crear sus propias secuencias de animación..
Al crear su animación usando KUTE.js, necesita definir objetos de interpolación. Estos objetos de interpolación proporcionan toda la información relacionada con la animación para un elemento o elementos dados. Esto incluye el elemento en sí, las propiedades que desea animar, la duración de la animación y otros atributos como el conteo de repetición, el retraso o el desplazamiento.
Puedes usar el .a() método o el .fromTo () Método para animar un conjunto de propiedades CSS de un valor a otro. los .a() El método anima las propiedades de su valor predeterminado o su valor calculado / actual a un valor final proporcionado. En el caso de la .fromTo () Método, debe proporcionar los valores de inicio y final de la animación..
los .a() El método es útil cuando no conoce el valor actual o predeterminado de la propiedad que desea animar. Una desventaja importante de este método es que la biblioteca tiene que calcular el valor actual de todas las propiedades por sí misma. Esto produce un retraso de unos pocos milisegundos después de que llame .comienzo() para iniciar la animación.
los .fromTo () El método le permite especificar los valores iniciales y finales de la animación. Esto puede mejorar marginalmente el rendimiento de las animaciones. Ahora también puede especificar las unidades para los valores de inicio y finalización y evitar sorpresas durante el curso de la animación. Una desventaja de usar .fromTo () es que no podrá apilar múltiples propiedades de transformación en interpolaciones encadenadas. En tales casos, tendrá que utilizar el .a() método.
Recuerda que ambos .fromTo () y .a() están destinados a ser utilizados cuando estás animando elementos individuales. Si desea animar varios elementos a la vez, deberá utilizar .todos() o .allFromTo (). Estos métodos funcionan igual que sus contrapartes de un solo elemento y heredan todos sus atributos. También obtienen un extra. compensar Atributo que determina el retraso entre el inicio de la animación para diferentes elementos. Este desplazamiento se define en milisegundos..
Aquí hay un ejemplo que anima la opacidad de tres cajas diferentes en secuencia.
El siguiente JavaScript se utiliza para crear la secuencia de animación anterior:
Accentsconagua
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);Todas las casillas de arriba tienen una caja clase que se ha utilizado para seleccionarlos todos usando el querySelectorAll () método. los allFromTo () El método en KUTE.js se usa para animar la opacidad de estas cajas de 1 a 0.1 con un desplazamiento de 700 milisegundos. Como puede ver, el objeto de interpolación no inicia la animación por sí solo. Tienes que llamar al comienzo() Método para iniciar la animación..
En la sección anterior, utilizamos el comienzo() Método para iniciar nuestras animaciones. La biblioteca KUTE.js también proporciona algunos otros métodos que pueden usarse para controlar la reproducción de la animación..
Por ejemplo, puede detener cualquier animación que esté actualmente en progreso con la ayuda de detener() método. Tenga en cuenta que puede usar este método para detener la animación de solo los objetos interpolados que se han almacenado en una variable. La animación para cualquier objeto de interpolación que se creó sobre la marcha no se puede detener con este método.
También tiene la opción de pausar una animación con la ayuda del pausa() método. Esto es útil cuando desea reanudar la animación nuevamente en un momento posterior. Usted puede usar currículum() o jugar() para reanudar cualquier animación que haya sido pausada.
El siguiente ejemplo es una versión actualizada de la demostración anterior con los cuatro métodos agregados..
Aquí está el código JavaScript necesario para agregar la funcionalidad de inicio, detener, reproducir y pausar.
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 da suficiente tiempo para presionar diferentes botones y ver cómo afectan la reproducción de la animación..
Puedes usar el cadena() Método para encadenar diferentes interpolaciones. Una vez que se han encadenado diferentes preadolescentes, llaman al comienzo() Método en otras interpolaciones una vez finalizada su propia animación..
De esta manera, puedes reproducir diferentes animaciones en una secuencia. Puede encadenar diferentes interpolaciones entre sí para reproducirlas en un bucle. El siguiente ejemplo debería dejarlo claro:
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 para animar la opacidad. Ahora hemos agregado otro que anima la rotación de nuestras cajas. Los dos primeros botones animan la opacidad y la rotación de uno en uno. El tercer botón activa el encadenamiento de animateOpacity con animateRotation.
El encadenamiento en sí no inicia la animación, por lo que también usamos el comienzo() Método para iniciar la animación de opacidad. El último botón se utiliza para encadenar ambas interpolaciones entre sí. Esta vez, las animaciones se siguen reproduciendo indefinidamente una vez que se han iniciado. Aquí hay una demostración de CodePen que muestra todo el código anterior en acción:
Para comprender completamente cómo funciona el encadenamiento, deberá presionar los botones en una secuencia específica. Haga clic en el Animar la opacidad Botón primero y verá que la animación de opacidad se reproduce solo una vez y luego no sucede nada más. Ahora, pulse el Rotación animada botón y verá que las cajas giran una vez y luego no pasa nada más.
Después de eso, pulse el Cadena de animaciones y verá 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 sucedió porque la animación de rotación ahora está encadenada a la animación de opacidad..
Ahora, pulse el Animar la opacidad Presione nuevamente el botón y verá que tanto la opacidad como la rotación están animadas en secuencia. Esto se debe a que ya se habían encadenado después de hacer clic en Cadena de animaciones.
En este punto, presionando el Rotación animada El botón solo 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 las casillas se rotarán cada vez que se anima la opacidad, pero una animación de rotación no significa que la opacidad también se animará.
Por último, puede hacer clic en el Jugar en un loop botón. Esto encadenará ambas animaciones entre sí, y una vez que eso suceda, las animaciones se seguirán reproduciendo en un bucle indefinido. Esto se debe a que el final de una animación desencadena el inicio de la otra animación..
En este tutorial introductorio de KUTE.js, aprendiste sobre los conceptos básicos de la biblioteca. Comenzamos con la instalación y luego pasamos a diferentes métodos que se pueden usar para crear objetos de interpolación..
También aprendió cómo controlar la reproducción de una animación y cómo encadenar diferentes interpolaciones. Una vez que entiendas completamente el encadenamiento, podrás crear algunas animaciones interesantes usando esta biblioteca.
En el siguiente tutorial de la serie, aprenderá cómo animar diferentes tipos de propiedades CSS usando KUTE.js.
