Claves para entender Angular Animation

Con la evolución de la tecnología y la masificación de la información a través de las interfaces digitales y el internet, miles de sitios en línea compiten por la atención del usuario, quien busca tener una experiencia agradable mientras navega por la web.

Precisamente, uno de los instrumentos que permite que la comunicación entre el usuario y un sitio web sea agradable, es la animación, que engloba, entre otras cosas, pequeñas interacciones fluidas que mejoran la usabilidad y la experiencia de usuario. 

En el mercado existen distintas herramientas  para la animación, una de ellas es de Angular, que facilita la creación e implementación de dichas interacciones. Gracias a esto, no hay excusas para no hacerlo. 

Por lo anterior, es vital que los desarrolladores que usen el framework Angular sepan que el sistema cuenta con un módulo específico para animaciones denominado Angular animations, que se  basa en la Web Animations API y permite animar cualquier propiedad de CSS que el navegador considere animable, ya sea cambiar el color y el  tamaño de un elemento, o desplazarlo a través del entorno.

Por esta razón, Angular facilita la ilusión de movimiento por medio de la interacción del usuario y en diferentes cambios de estado de la aplicación web.

Para profundizar un poco en Angular Animation, debemos comprender que una animación es la transición fluida entre diferentes estados de un elemento específico dando así la sensación de movimiento de dicho elemento. En este caso, Angular define los siguientes tres tipos de estados para un elemento:

1. Estado vacío (void)

2. Estado wildcard

Es el estado predeterminado de los elementos en general. Los estilos definidos en este estado son aplicables al elemento sin importar su estado de animación actual. Se define el estado con el símbolo asterisco ‘ * ’.

3. Estado personalizado

Necesita estar definido explícitamente en el código. Para definirlo, se puede usar cualquier nombre de nuestra elección.

Timing

Además de los estados, en Angular Animations debemos controlar otra variable importante que denominaremos Timing. Se trata de la duración o temporalidad que tiene una transición de un estado a otro. Para esto, Angular define tres propiedades de temporalidad que veremos a continuación:

1 Duración: representa la extensión del tiempo que toma la animación desde el estado inicial al final. En Angular se define la duración de las siguientes maneras:

• Ingresar un valor entero en milisegundos: ‘500’
• Ingresar un valor string especificando su unidad en segundos o milisegundos: ‘0.5s’ o ‘500ms’

2 Retraso (delay): representa la extensión de tiempo entre la activación y el inicio real de la transición. Es una propiedad opcional y se define de la misma manera que la duración. El valor se ingresa luego del valor de la duración: ‘0.5s 350ms’

3 Easing: esta propiedad determina la aceleración y desaceleración durante la ejecución de la transición, permite controlar la transición para que sea lineal, de entrada lenta (ease-in), de salida lenta (ease-out), o de entrada y salida lenta (ease-in-out).

Al igual que el retraso, easing es opcional y se define luego de la duración y el retraso. Se usan los términos ‘ease-in’ y ‘ease-out’. En caso de no definirse el retraso, se define la propiedad easing después de la duración: ‘0.5s 350ms ease-in’ o ‘0.5s ease-in’.

Sintaxis

Para determinar los estados de un elemento y la transición que tendrán durante la animación, podemos definirlos en el componente como se muestra a continuación:

Tal y como acabamos de observar, en el metadato  animations del decorador @Component, se ubica uno o más activadores trigger, que tienen nombre y activación única. En cada trigger se ubicarán los estados y transiciones de la animación. Cada estado tendrá un nombre (nombreEstado) y una función style() que definirá los estilos que tendrá un determinado elemento en dicho estado.

Cada transición tendrá una expresión que determina los cambios de un estado a otro. Se usa una expresión unidireccional (‘=>’) o se puede usar una expresión bidireccional  (‘<=>’).

Además de la expresión, cuenta con un array de animaciones ([Animation Steps]), en el cual se determinará como se llevará a cabo dicha transición.

Para poder aplicar la animación a un elemento, se escribe en el tag de dicho elemento un símbolo arroba (@) seguido del nombre del trigger de la siguiente forma:

<div @nombreTrigger></div>

Finalmente, de esta manera, al elemento div se le aplicó el trigger triggerName.

Entendiendo y manejando estas variables que acabamos de ver (estados y timing), podremos realizar transiciones interesantes para el sitio web.

Usar este módulo de Angular presenta ciertas ventajas frente a otras maneras de crear animaciones. Por ejemplo, algunas características serían muy complejas de realizar usando CSS, ya que Angular permite con facilidad aplicar diferentes estilos durante la transición entre un estado y otro, sin que dichos estilos pertenezcan a uno de los estados. Por otro lado, Angular también admite animar elementos que son añadidos o removidos del DOM por medio del estado ‘Void’.

Así de sencillo es usar Angular Animations, con estas bases podremos realizar diversas animaciones e interacciones para la aplicación web que estemos desarrollando. Nos vemos en un próximo episodio con un tutorial de Angular Animations.