Animaciones con Angular

Funciones del módulo Animations:

Estas son algunas de las funciones que permite Angular con animations, para construir todo tipo de animaciones.

• query();

Encuentra uno o más elementos HTML internos.

• stagger();

Aplica un retraso en cascada a las animaciones de varios elementos.

• group();

Ejecuta varios pasos de animación en paralelo.

• secuence();

Ejecuta pasos de animación uno tras otro.

• Anmation();

Realiza una animación reutilizable que se puede invocar desde otro lugar.

• Keyframe();

Permite un cambio secuencial entre estilos dentro de un intervalo de tiempo especificado.

• Animate();

Especifica la información de tiempo para una transición. Valores opcionales para retardo y aceleración.

• State();

Un conjunto con nombre de estilos CSS que deben aplicarse en una transición.

• Style();

Define uno o más estilos CSS para usar en animaciones.

• Trigger();

Sirve como contenedor para todas las demás llamadas a funciones de animación.

• Transition();

Define la secuencia de animación entre dos estados con nombre.

Guía animaciones con Angular:

Para trabajar con animaciones en Angular lo primero que hay que hacer es importar el módulo animation, dentro de app.module.ts.

Ahora necesitamos un componente para ir animando Angular, en la terminal Visual Studio Code ponemos el siguiente comando “ng generate component”, seguido del nombre que nos parezca oportuno, en este caso animacion.

Archivos:

• Empezamos por el componente creando el archivo animación.component.html, colocamos una etiqueta div que contenga una clase y un botón para disparar el evento de la animación con la clase cambiar.
• Vamos al archivo animación.component.css, definimos la clase del div, para que todo funcione correctamente.
•  Nos vamos a definir la lógica de lo que queremos realizar en animación.component.ts, en la clase de typeScript vamos a ir definiendo las propiedades, ya definidas con un propiedad llamado animations, que contendrá en su interior las características de la animación.

Primeros pasos:

Para definir un estado usaremos función state del módulo animations, le daremos un nombre representativo en nuestro caso agrandar1, seguido de la función style que representa un elemento en un momento según el estado, otro estado igual al primero, pero con propiedades distintas para notar los cambios.

Ahora nos faltaría como unir el elemento de html para que haga referencia a los estados, esto se realiza mediante un trigger que es una función que agrupa estados y transiciones, esta función recibe dos parámetros, un nombre y el segundo, un array que contenga un estado o una transacción.

Creamos una variable con el valor por defecto del primer estado, y la función pulsarAnimar para que cambie el estado cuando se realice el click en el botón, la función se define con el valor por defecto, si es correcto se cambia a estado dos, de lo contrario permanece en estado uno.

A continuación, debemos asociar el trigger con nuestro html y volvemos a la plantilla, en el div anteriormente creado colocamos el nombre del trigger con un @ delante entre corchetes y le asociamos a la variable creada anteriormente.

Aplicaremos una transacción con un tiempo determinado para que el cambio tanto del color como de forma sea más natural, para ello cogeremos dos métodos de Animations, transition y animate, al segundo le podremos el tiempo de duración y al primero los cambios de estado, <=> lo que queremos hacer es que se cambie entre estos dos estados.

 

Estilos intermedios:     

Las transiciones nos permiten hacer cambio en un objeto html, respecto a la función transition hemos definido en tiempo gracias a anímate. Otra cosa que podemos hacer es dividir la animación por etapas, hemos cambiado una animación al pulsar un botón, el tamaño de la etiqueta div, la anchura, altura y el color. Estos cambios se llevaban a cabo de forma simultánea.

Animación en secuencia:

Vamos a dividir la animación para trabajar con los estilos intermedios, para ello realizaremos dos transiciones, en lugar de pasarle directamente una función animate le pasamos un array de este, para poder segmentar la transición en distintas animaciones. También le pasaremos un estilo, mediante un objeto, usaremos varias animaciones dentro de la transacción para que cada animación sea independiente de las otras.

Retraso y modo de animación:

Usaremos String para los tiempos con los sufijos “ms” para milisegundos y “s” para segundos, con esto Angular nos permite configurar nuestras animaciones y consigue mayor complejidad, aplicaremos el retraso, que es el tiempo que debe esperar para iniciar la animación en particular.

• 1000ms es el tiempo de duración de la animación en milisegundos.
• 1s es el retraso es segundos.

También podemos controlar la velocidad de la animación. Esto se puede hacer utilizando el modo de animación, crearemos otro componente distinto con el nombre modo-animacion.

Valor ease-in, conseguiremos que la animación empiece con un movimiento lento y después acelere,

ease-out produce el efecto contrario.

También podemos usar efectos rebote con cubic-bezier al que le pasaremos una serie de valores para conseguir distintos cambios de velocidad.

Con este cambio conseguiremos tener animaciones más naturales y creíbles a la vista. Hay multitud de estos efectos, que puedes consultar en la documentación de Angular https://angular.io/docs .

Keyframes:

Los keyframe nos permiten tener un control mayor de las etapas de la animación, no solo podemos dividir una animación en distintas etapas, sino que podemos trabajar las distintas duraciones de cada etapa.

Para usar esta función debemos pasar el parámetro a la función animate, poniendo keyframes y pasarle un array de estilos. Se puede controlar el tiempo de animación definiendo entre una transición de cada estilo al siguiente estilo. Esto se realiza mediante offset con los valores de 0 a 1, donde 0 es el inicio y 1 es el fin.

Con esto tendremos una animación con movimiento de rebote, podemos jugar con los valores de cada estilo para adecuarlo a lo que queremos conseguir.

 Conclusión

Las animaciones en cualquier página web o aplicación, es un buen recurso, para modernizarse y llamar la atención del usuario, conseguiremos mejorara la accesibilidad, hacer la aplicación más intuitiva para cualquier usuario que use nuestro software y darles un valor mayor a nuestros proyectos con Angular.

Angular cuenta con una más de una sobrada API para realizar animaciones con buenos efectos y transacciones suaves, pero también tienes la opción de acudir a bibliotecas externas si desea realizar animaciones más complejas.

Bibliotecas externas:

Además de animations existen bibliotecas externas muy potentes para realizar animaciones interesantes como Three.js y GreenSock.

• js es una biblioteca basada en los gráficos 3D que nos permite realizas efectos en tres dimensiones, tiene una API intuitiva y sencilla, nos permite animar objetos en 3D, jugando con las luces y sombras.

Implantación de Three.js;

•  Instalar mediante comando npm install thee.
•  Importar con import * as THREE from ‘three’.

• GreenSock esta es conocida por sus animaciones de alto rendimiento, nos proporciona unas complejas herramientas para crear los efectos más modernos y suaves en todas las plataformas.

Implementación de GreenSock;

• Instalar mediante comando npm install gsap
• Importa con import {gsap} from ‘gsap ‘.