Advertisement
  1. Code
  2. JavaScript
Code

Animaciones Basadas en JavaScript Usando Anime.js, Parte 1: Objetivos y Propiedades

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called JavaScript-Based Animations Using Anime.js.
JavaScript-Based Animations Using Anime.js, Part 2: Parameters

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Anime.js es una ligera librería de animación basada en JavaScript. Puedes usarla para animar diferentes propiedades CSS, SVG o atributos DOM en una página web. La librería te permite controlar todos los aspectos de la animación y proporciona muchas maneras de especificar los elementos que quieres usar o las propiedades que quieres animar.

Tienes control completo sobre la secuencia en la cuál las animaciones son reproducidas o qué tan sincronizadas están las animaciones de diferentes elementos con respecto a unas con otras. La librería soporta todos los navegadores modernos, incluyendo IE10+.

En esta serie de tutoriales, aprenderás sobre todas las características de Anime.js para que puedas usarlas en proyectos de la vida real con facilidad.

Antes de sumergirnos más en el tema, instalemos primero la librería. Puedes usar npm o bower para realizar la instalación ejecutando los siguientes comandos:

También puedes descargar la librería e incluirla en tu proyecto o enlazar directamente a la última versión de la librería hospedada en una CDN.

Después de una instalación exitosa, ahora estás listo para usar esta librería y agregar animación interesante a tus elementos. Comenzaremos con los básicos de la librería, enfocándonos en un área particular a la vez.

Especificando Elementos Meta

Para crear cualquier animación usando Anime.js, tendrás que llamar a la función anime() y pasarle un objeto con pares llave-valor que especifiquen los elementos meta y propiedades que quieres animar, entre otras cosas. Puedes usar la clave targets para decirle a Anime.js cuáles elementos quieres animar. Esta clave puede aceptar valores en distintos formatos.

Selectores CSS: Puedes pasar uno o más selectores CSS como un valor para la clave targets.

En el primer caso, Anime.js animará todos los elementos con una clase blue. En el segundo caso, Anime.js animará todos los elementos con ya sea una clase red o blue. En el tercer caso, Anime.js animará todos los hijos iguales con una clase square. En el último caso, Anime.js animará todos los elementos con una clase square que no tenga una clase red.

Nodo DOM o NodeList: También puedes usar un nodo DOm o una NodeList como un valor para la clave targets. Aquí hay unos cuantos ejemplos de establecer los targets como un nodo DOM.

En el primer caso, he usado la función getElementById() para obtener nuestro elemento especial. La función querySelector() es usada para obtener el primer elemento que tiene la clase blue. La función querySelectorAll() es usada para obtener todos los elementos dentro del documento que coinciden con el grupo especificado de selectores.

Hay muchas otras funciones también que puedes usar para seleccionar tus elementos metas que quieres animar. Por ejemplo, puedes obtener todos los elementos con un nombre de clase dado usando la función getElementsByClassName(). De manera similar, también puedes obtener todos los elementos con un nombre de etiqueta dado usando la función getElementsByTagName().

Cualquier función que devuelve un nodo DOM o una NodeList puede ser usada para establecer el valor de la clave targets en Anime.js.

Objeto: También puedes usar un objeto JavaScript como un valor para la clave targets. La clave de ese objeto es usada como un identificador, y el valor es usado como un número que necesita ser animado.

Puedes entonces 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.

El código de arriba animará la cuenta de archivos escaneados de 0 a 1,000 y la cuenta de archivos infectados de 0 a 8. Ten en mente que solo puedes animar valores numéricos de este modo. Intentar animar una clave de 'AAA' a 'BOY' resultará en un error.

También hemos usado una función de retroceso para la clave update que es llamada en cada cuadro mientras que la animación está corriendo. La hemos usado aquí para actualizar el conteo de archivos escaneados e infectados. Sin embargo, podrías ir un paso más allá y mostrar a los usuarios un mensaje de error cuando el número de archivos infectados pasa un cierto umbral.

Arreglo: La habilidad para especificar un arreglo JavaScript como el objetivo resulta útil cuando tienes que animar un montón de elementos que caen bajo diferentes categorías. Por ejemplo, si quieres animar un nodo DOM, un objeto y una pila de otros elementos basados en selectores CSS, puedes hacerlo de forma sencilla poniéndolos todos dentro de un arreglo y después especificando ese arreglo como el valor para la clave targets. El siguiente ejemplo debería hacerlo más claro:

Propiedades Que Pueden Ser Animadas en Anime.js

Ahora que sabes cómo especificar diferentes elementos que quieres animar, es tiempo de aprender sobre todas las propiedades y atributos que pueden ser animados usando la librería.

Propiedades CSS: Anime.js te permite animar muchas propiedades CSS, como el ancho, alto, y color, para diferentes elementos meta. Los valores finales de diferentes propiedades que se pueden animar como color de fondo y ancho de borde son especificadas usando una versión camel case de esa propiedad. Así pues, el color de fondo se vuelve backgroundColor y border-width se vuelve borderWidth. El siguiente código muestra cómo animar la posición izquierda y el color de fondo de un elemento meta en Anime.js.

Las propiedades pueden aceptar todo tipo de valores que serían aceptados cuando se usan en CSS regular. Por ejemplo, la propiedad left podría ser establecida a 50vh, 500px, o 25em. También podrías especificar el valor como un número. En este caso, el número sería convertido a valor pixel. De manera similar, el color de fondo podría ser especificado como color de valor hexadecimal, RGB o HSL.

Transformaciones CSS: También puedes animar diferentes propiedades de transformación CSS usando Anime.js. La traslación a lo largo de los ejes x  y y puede ser lograda usando las propiedades translateX y translateY. De manera similar, es posible escalar, sesgar o rotar un elemento a lo largo de un eje específico usando la propiedad scale, skew y rotate correspondiente a ese eje específico.

Puedes especificar diferentes ángulos en términos de grados o en términos de turn. El valor de 1 turn es igual a 360°. Esto puede hacer el cálculo más sencillo cuando sabes cuánto quieres rotar los elementos en términos de vueltas completas. El siguiente ejemplo muestra cómo animar el escalado, traslación o rotación de un elemento en una base individual asó como todo a la vez.

Atributos SVG: Es posible animar atributos de diferentes elementos SVG usando Anime.js. La única condición es que el valor de esos atributos debería ser numérico. Esta habilidad para animar diferentes atributos abre la posibilidad de crear algunos efectos realmente geniales. Ya que solo estás comenzando a aprender sobre Anime.js, mentendrémos los ejemplos en este tutorial muy básicos.

Mientras avanzamos, aprenderás cómo crear animaciones más complejas. Aquí está el código para animar los atributos cx, cy y stroke-width de un círculo. Justo como las propiedades CSS, necesitas usar una notación de camello de stroke-width para que el código funcione.

Atributos DOM: También puedes animar atributos numéricos DOM justo como animaste los atributos SVG. Una situación en donde puede ser útil animar un atributo DOM es el elemento progreso HTML5. Este elemento tiene dos atributos, valor y max. En nuestro ejemplo, estaremos animando el valor del atributo para mostrar el progreso de nuestro proceso de transferencia de archivo. Aquí está el código para animar el valor del atributo.

Ideas Finales

En este tutorial, aprendiste sobre todas las maneras de seleccionar elementos en Anime.js y cómo animar diferentes propiedades CSS y atributos relacionados a ellas. En este punto, no estamos controlando nada relacionado con la animación.

JavaScript es discutiblemente el lenguaje de la web. Esto no es sin sus curvas de aprendizaje, por supuesto, y hay muchos otros frameworks y librerías para mantenerte ocupado, como puedes notar. Si estás buscando recursos adicionales para estudiar o usar en tu trabajo, revisa lo que tenemos disponible en el mercado Envato.

En el siguiente tutorial de la serie, aprenderás cómo controlar el suavizado, retraso y duración de la animación para distintas propiedades como un grupo así como de manera individual. Entonces aprenderás cómo controlar todas esos parámetros de animación para elementos individuales.

Si hay alguna pregunta relacionada a este tutorial o has usado Anime.js en cualquier proyecto interesante, por favor déjanos saber en los comentarios.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.