Share
Anime.js es una biblioteca de animación ligera basada en JavaScript. Puede usarlo para animar diferentes propiedades CSS, SVG o atributos DOM en una página web. La biblioteca le permite controlar todos los aspectos de la animación y le brinda muchas maneras de especificar los elementos que desea orientar o las propiedades que desea animar..
Usted tiene control total sobre la secuencia en la que se reproducen las animaciones o cómo se sincronizan las animaciones de los diferentes elementos entre sí. La biblioteca soporta todos los navegadores modernos, incluyendo IE10+.
En esta serie de tutoriales, conocerá todas las características de Anime.js para que pueda usarlas en proyectos de la vida real con facilidad..
Antes de profundizar en el tema, primero instalemos la biblioteca. Puedes usar cualquiera npm o cenador para realizar la instalación ejecutando los siguientes comandos:
npm install animejs bower install animejs
También puede descargar la biblioteca e incluirla en su proyecto o directamente a la última versión de la biblioteca alojada en un CDN..
Después de una instalación exitosa, ahora está listo para usar esta biblioteca para agregar animaciones interesantes a sus elementos. Comenzaremos con los conceptos básicos de la biblioteca, centrándonos en un área en particular a la vez.
Para crear animaciones usando Anime.js, deberás llamar al anime () Funcione y pásele un objeto con pares clave-valor que especifiquen los elementos de destino y las propiedades que desea animar, entre otras cosas. Puedes usar el objetivos clave para decirle a Anime.js qué elementos quieres animar. Esta tecla puede aceptar valores en diferentes formatos..
Selectores de CSS: Puede pasar uno o más selectores de CSS como un valor para el objetivos llave.
var blue = anime (objetivos: '.blue', translateY: 200); var redBlue = anime (objetivos: '.red, .blue', translateY: 200); var even = anime (objetivos: '.square: nth-child (even)', translateY: 200); var notRed = anime (objetivos: '.square: not (.red)', translateY: 200);
En el primer caso, Anime.js animará todos los elementos con un azul clase. En el segundo caso, Anime.js animará todos los elementos ya sea con el rojo o azul clase. En el tercer caso, Anime.js animará a todos los niños pares con un cuadrado clase. En el último caso, Anime.js animará todos los elementos con un cuadrado clase que no tiene rojo clase.
Nodo DOM o NodeList: También puede usar un nodo DOM o un NodeList como un valor para el objetivos llave. Aquí hay algunos ejemplos de cómo configurar el objetivos como un nodo DOM.
Accentsconagua
var special = anime (objetivos: document.getElementById ('especial'), translateY: 200); var blue = anime (objetivos: document.querySelector ('. blue'), translateY: 200); var redBlue = anime (objetivos: document.querySelectorAll ('. red, .blue'), translateY: 200); var even = anime (targets: document.querySelectorAll ('. square: nth-child (even)'), translateY: 200); var notRed = anime (objetivos: document.querySelectorAll ('. square: not (.red)'), translateY: 200);En el primer caso, he usado el getElementById () Función para obtener nuestro elemento especial. los querySelector () La función se usa para obtener el primer elemento que tiene la clase azul. los querySelectorAll () La función se utiliza para obtener todos los elementos del documento que coinciden con el grupo especificado de selectores..
También hay muchas otras funciones que puede usar para seleccionar los elementos de destino que desea animar. Por ejemplo, puede obtener todos los elementos con un nombre de clase determinado utilizando el getElementsByClassName () función. Del mismo modo, también puede obtener todos los elementos con un nombre de etiqueta dado utilizando el getElementsByTagName () función.
Cualquier función que devuelva un nodo DOM o una lista de nodos puede usarse para establecer el valor de objetivos clave en anime.js.
Objeto: También puede usar un objeto JavaScript como un valor para el objetivos llave. La clave de ese objeto se usa como un identificador, y el valor se usa como un número que necesita ser animado.
Luego puede mostrar la animación dentro de otro elemento HTML con la ayuda de JavaScript adicional. Aquí está el código para animar los valores de dos claves diferentes de un objeto.
var filesScanned = count: 0, infectado: 0; var scan = anime (target: filesScanned, count: 1000, infectado: 8, round: 1, update: function () var scanCount = document.querySelector ('. scan-count'); scanCount.innerHTML = filesScanned.count ; var infectedCount = document.querySelector ('. infected-count'); infectedCount.innerHTML = filesScanned.infected;);El código anterior animará el recuento de archivos escaneados de 0 a 1.000 y el número de archivos infectados de 0 a 8. Tenga en cuenta que solo puede animar valores numéricos de esta manera. Intentar animar una clave de 'AAA' a 'BOY' resultará en un error.
También hemos utilizado una función de devolución de llamada para el actualizar tecla que se llama en cada fotograma mientras se ejecuta la animación. Lo hemos utilizado aquí para actualizar el recuento de archivos escaneados e infectados. Sin embargo, podría ir un paso más allá y mostrar a los usuarios un mensaje de error cuando el número de archivos infectados supera un determinado umbral..
Formación: La capacidad de especificar una matriz de JavaScript como objetivo es útil cuando tiene que animar un grupo de elementos que se encuentran en diferentes categorías. Por ejemplo, si desea animar un nodo DOM, un objeto y un montón de otros elementos basados en los selectores de CSS, puede hacerlo fácilmente colocándolos todos dentro de una matriz y luego especificando esa matriz como un valor para el objetivos llave. El siguiente ejemplo debería aclararlo:
var multipleAnimations = anime (objetivos: [document.querySelectorAll ('. blue'), '.red, #special'], translateY: 250);Ahora que sabe cómo especificar los diferentes elementos que desea animar, es hora de conocer todas las propiedades y atributos que se pueden animar utilizando la biblioteca..
Propiedades CSS: Anime.js te permite animar una gran cantidad de propiedades CSS, como el ancho, la altura y el color, para diferentes elementos de destino. Los valores finales de diferentes propiedades animables como el color de fondo y el ancho del borde se especifican utilizando una versión de caja de camello de esa propiedad. Por lo tanto, el color de fondo se convierte en color de fondo, y el ancho del borde se convierte en ancho del borde. El siguiente fragmento de código muestra cómo animar la posición izquierda y el color de fondo de un elemento de destino en Anime.js.
var animateLeft = anime (objetivos: '.square', izquierda: '50% '); var animateBackground = anime (target: '.square', backgroundColor: '# f96');
Las propiedades pueden aceptar todo tipo de valores que habrían aceptado cuando se usen en CSS regular. Por ejemplo, la propiedad. izquierda podría establecerse en 50vh, 500px, o 25em. También puede especificar el valor como un número simple. En este caso, el número se convertiría en un valor de píxel. Del mismo modo, el color de fondo se puede especificar como un valor de color hexadecimal, RGB o HSL.
Transformaciones CSS: También puedes animar diferentes propiedades de transformación de CSS usando Anime.js. La traducción a lo largo de los ejes x e y se puede lograr usando el traducirX y traducirY propiedades De manera similar, es posible escalar, sesgar o rotar un elemento a lo largo de un eje específico usando el escala, sesgar y girar propiedad correspondiente a ese eje específico.
Puede especificar diferentes ángulos en términos o grados o en términos de giro. El valor de 1 vuelta es igual a 360 °. Esto puede facilitar el cálculo cuando sabe cuánto desea convertir los elementos en términos de rotaciones completas. El siguiente ejemplo muestra cómo animar la escala, la traducción o la rotación de un elemento de forma individual, así como todos a la vez..
var animateScaling = anime (objetivos: '.square', escala: 0.8); var animateTranslation = anime (objetivos: '.square', translateX: window.innerWidth * 0.8); var animateRotation = anime (objetivos: '.square', rotate: '1turn'); var animateAll = anime (objetivos: '.square', escala: 0.8, translateX: window.innerWidth * 0.8, rotate: '1turn');
Atributos de SVG: Es posible animar atributos de diferentes elementos SVG usando Anime.js. La única condición es que el valor de esos atributos sea numérico. Esta capacidad para animar diferentes atributos abre la posibilidad de crear algunos efectos realmente geniales. Ya que estás empezando a aprender sobre Anime.js, mantendremos los ejemplos en este tutorial muy básicos..
A medida que avanzamos, aprenderá cómo crear animaciones más complejas. Aquí está el código para animar el cx, cy y anchura del trazo Atributos de un círculo. Al igual que las propiedades CSS, debe utilizar una versión de camel case de anchura del trazo para que el código funcione.
var animateX = anime (objetivos: '.circle', cx: window.innerWidth * 0.6); var animateStrokeWidth = anime (objetivos: '.circle', strokeWidth: '25');
Atributos DOM: También puede animar atributos DOM numéricos al igual que animó los atributos SVG. Una situación en la que animar un atributo DOM puede ser útil es el elemento de progreso HTML5. Este elemento tiene dos atributos., valor y max. En nuestro ejemplo, animaremos el atributo de valor para mostrar el progreso de nuestro proceso de transferencia de archivos. Aquí está el código para animar el valor atributo.
var animateProgress = anime (objetivos: 'progreso', valor: 100, suavizado: 'lineal');
En este tutorial, aprendiste sobre todas las formas de seleccionar elementos de destino en Anime.js y cómo animar diferentes propiedades de CSS y atributos relacionados con ellos. En este punto, no estamos controlando nada relacionado con la animación real.
JavaScript es discutiblemente la Idioma de la web. No está exenta de curvas de aprendizaje, por supuesto, y hay muchos marcos y bibliotecas para mantenerte ocupado, como puedes ver. Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en el mercado de Envato.
En el siguiente tutorial de la serie, aprenderá a controlar la aceleración, el retraso y la duración de la animación para diferentes propiedades como grupo e individualmente. Luego aprenderá cómo controlar todos estos parámetros de animación para elementos individuales.
.
