Cómo usar la animación con Angular 6

Programación

Introducción

La animación se define como la transición de un estado inicial a un estado final. Es una parte integral de cualquier aplicación web moderna. La animación no solo nos ayuda a crear una gran interfaz de usuario, sino que también hace que la aplicación sea interesante y divertida de usar. Una animación bien estructurada mantiene al usuario comprometido con la aplicación y mejora la experiencia del usuario.

Angular nos permite crear animaciones que nos proporcionan un rendimiento nativo similar al de las animaciones CSS. En este artículo, aprenderemos cómo podemos crear animaciones usando Angular 6.

Usaremos Visual Studio Code para nuestra demostración.

Prerrequisitos

Instale el código VS y Angular CLI.

Si es nuevo en Angular, consulte mi artículo anterior Comenzando con Angular 6.0 para configurar el entorno de desarrollo de Angular 6 en su máquina.

Código fuente

Descarga el código fuente de GitHub.

Comprensión de los estados de animación angular

La animación implica la transición de un estado de un elemento a otro estado. Angular define tres estados diferentes para un elemento:

  1. Estado vacío: representa el estado de un elemento que no forma parte del DOM. Este estado ocurre cuando se crea un elemento pero aún no se coloca en el DOM o cuando el elemento se elimina del DOM. Este estado es útil cuando queremos crear una animación mientras agregamos o eliminamos un elemento de nuestro DOM. Para definir este estado en nuestro código usamos la palabra clave void.
  2. El estado comodín: esto también se conoce como el estado predeterminado del elemento. Los estilos definidos para este estado son aplicables al elemento independientemente de su estado de animación actual. Para definir este estado en nuestro código usamos el *símbolo.
  3. Estado personalizado: este es el estado personalizado del elemento y debe definirse explícitamente en el código. Para definir este estado en nuestro código, podemos usar cualquier nombre personalizado de nuestra elección.

Tiempo de transición de la animación

Para mostrar la transición de la animación de un estado a otro, definimos el tiempo de transición de la animación en nuestra aplicación.

Angular proporciona las siguientes tres propiedades de temporización:

Duración

Esta propiedad representa el tiempo que tarda nuestra animación en completarse desde el inicio (estado inicial) hasta el final (estado final). Podemos definir la duración de la animación de las siguientes tres formas:

  • Usando un valor entero para representar el tiempo en milisegundos. Por ejemplo, 500
  • Usando un valor de cadena para representar el tiempo en milisegundos. Por ejemplo: '500ms'
  • Usando un valor de cadena para representar el tiempo en segundos. Por ejemplo: '0,5 s'

Retrasar

Esta propiedad representa la duración entre la activación de la animación y el comienzo de la transición real. Esta propiedad también sigue la misma sintaxis que la duración. Para definir el retraso, debemos agregar el valor de retraso después del valor de duración en un formato de cadena: 'Retraso de duración'. El retraso es una propiedad opcional.

Por ejemplo:

  • '0.3s 500ms'. Esto significa que la transición esperará 500 ms y luego se ejecutará durante 0,3 segundos.

Facilitar

Esta propiedad representa cómo la animación se acelera o desacelera durante su ejecución. Podemos definir el suavizado agregándolo como la tercera variable en la cadena después de la duración y el retraso. Si el valor de retardo no está presente, la relajación será el segundo valor. Esta también es una propiedad opcional.

Por ejemplo:

  • '0.3s 500ms easy-in': esto significa que la transición esperará 500ms y luego se ejecutará durante 0.3s (300ms) con efecto de fácil entrada.
  • '300ms de salida fácil'. - Esto significa que la transición se ejecutará durante 300 ms (0,3 s) con efecto de desaceleración.

Creando la aplicación Angular 6

Abra el símbolo del sistema en su máquina y ejecute el siguiente conjunto de comandos:

  • mkdir ngAnimationDemo
  • cd ngAnimationDemo
  • ng new ngAnimation

Estos comandos crearán un directorio con el nombre ngAnimationDemoy luego crearán una aplicación Angular con el nombre ngAnimationdentro de ese directorio.

Abra la aplicación ngAnimation usando el código VS. Ahora crearemos nuestro componente.

Navegue hasta View >> Integrated Terminal. Esto abrirá una ventana de terminal en VS Code.

Ejecute el siguiente comando para crear el componente.

ng g c animationdemo

Esto creará nuestro componente animationdemodentro de la /src/appcarpeta.

Para usar la animación angular, necesitamos importar BrowserAnimationsModulecuál es un módulo específico de animación en nuestra aplicación. Abra el archivo app.module.ts e incluya la definición de importación como se muestra a continuación:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // other import definitions @NgModule({ imports: [BrowserAnimationsModule // other imports]})

Comprender la sintaxis de animación angular

Escribiremos nuestro código de animación dentro de los metadatos del componente. La sintaxis de la animación se muestra a continuación:

@Component({ // other component properties. animations: [ trigger('triggerName'), [ state('stateName', style()) transition('stateChangeExpression', [Animation Steps]) ] ] })

Aquí usaremos una propiedad llamada animations. Esta propiedad tomará una matriz como entrada. La matriz contiene uno o más "disparadores". Cada disparador tiene un nombre y una implementación únicos. El estado y las transiciones de nuestra animación deben definirse en la implementación del disparador.

Cada función de estado tiene un "stateName" definido para identificar de forma única el estado y una función de estilo para mostrar el estilo del elemento en ese estado.

Each transition function has a stateChangeExpression defined to show the change of the state of an element and the corresponding array of animation steps to show how the transition will take place. We can include multiple trigger functions inside the animation property as comma separated values.

These functions trigger, and state and transition are defined in the @angular/animations module. Hence, we need to import this module in our component.

To apply animation on an element, we need to include the trigger name in the element definition. Include the trigger name followed by @ symbol in the element tag. Refer to the sample code below:

This will apply the trigger changeSize to the iv> element.

Let us create a few animations to get a better understanding of the Angular animation concepts.

Change Size Animation

We will create an animation to change the size of a iv> element on a button click.

Open the animationdemo.component.ts file and add the following import definition:

import { trigger, state, style, animate, transition } from '@angular/animations';

Add the following animation property definition in the component metadata:

animations: [ trigger('changeDivSize', [ state('initial', style({ backgroundColor: 'green', width: '100px', height: '100px' })), state('final', style({ backgroundColor: 'red', width: '200px', height: '200px' })), transition('initial=>final', animate('1500ms')), transition('final=>initial', animate('1000ms')) ]), ]

Here we have defined a trigger changeDivSize and two state functions inside the trigger. The element will be green in the “initial” state and will be red with an increased width and height in the “final” state.

We have defined transitions for the state change. Transition from “initial” state to “final” will take 1500ms and from “final” state to “initial” will take 1000ms.

To change the state of our element we will define a function in the class definition of our component. Include the following code in the AnimationdemoComponent class:

currentState = 'initial'; changeState() { this.currentState = this.currentState === 'initial' ? 'final' : 'initial'; }

Here we have defined a changeState method which will switch the state of the element.

Open animationdemo.component.html file and add the following code:

Change the div size
 Change Size

We have defined a button which will invoke the changeState function when clicked. We have defined a iv> element and applied the animation tr igger changeDivSize to it. When we click on the button it will flip the state o f the element and its size will change with a transition effect.

Before executing the application, we need to include the reference to our Animationdemo component inside the app.component.html file.

Open app.component.html file. You can see we have some default HTML code in this file. Delete all the code and put the selector of our component as shown below:

To execute the code run the ng serve command in the VS code terminal window. After running this command, it will ask to open //localhost:4200 in the browser. So, open any browser on your machine and navigate to this URL. You can see a webpage as shown below. Click on the button to see the animation.

Balloon effect animation

In the previous animation, the transition happened in two directions. In this section, we will learn how to change the size from all directions. It will be similar to inflating and deflating a balloon, hence the name balloon effect animation.

Add the following trigger definition in the animation property:

trigger('balloonEffect', [ state('initial', style({ backgroundColor: 'green', transform: 'scale(1)' })), state('final', style({ backgroundColor: 'red', transform: 'scale(1.5)' })), transition('final=>initial', animate('1000ms')), transition('initial=>final', animate('1500ms')) ]),

Here, instead of defining the width and height property, we are using the transform property to change the size from all directions. The transition will occur when the state of the element is changed.

Add the following HTML code in the app.component.html file:

Balloon Effect

Here we have defined a div and applied the CSS style to make it a circle. Clicking on the div will invoke the changeState method to switch the element’s state.

Open the browser to see the animation in action as shown below:

Fade In and Fade Out animation

Sometimes we want to show animation while adding or removing an element on the DOM. We will see how to animate the addition and removal of an item to a list with a fade-in and fade-out effect.

Add the following code inside the AnimationdemoComponent class definition for adding and removing the element in a list:

listItem = []; list_order: number = 1; addItem() { var listitem = "ListItem " + this.list_order; this.list_order++; this.listItem.push(listitem); } removeItem() { this.listItem.length -= 1; }

Add the following trigger definition in the animation property:

trigger('fadeInOut', [ state('void', style({ opacity: 0 })), transition('void  *', animate(1000)), ]),

Here we have defined the trigger fadeInOut. When the element is added to the DOM it is a transition from void to wildcard (*) state. This is denoted using void =>; *. When the element is removed from the DOM, it is a transition from wildcard (*) to void state. This is denoted using * =>; void.

When we use the same animation timing for both directions of the animation, we use the shorthand syntax <;=>. As defined in this trigger, the animation from void =&gt; * and * => void will take 1000ms to complete.

Add the following HTML code in app.component.html file.

Fade-In and Fade-Out animation
 Add List Remove List 
     
    
      
  •  {{list}} 
    •

Here we are defining two buttons to add items to and remove them from the list. We are binding the fadeInOut trigger to the <li> element, which will show a fade-in and fade-out effect while being added and removed from the DOM.

Open the browser to see the animation in action as shown below:

Enter and Leave animation

When adding to the DOM, the element will enter the screen from the left. When deleting, the element will leave the screen from the right.

The transition from void => * and * => void is very common. Therefore, Angular provides aliases for these animations:

  • for void => * we can use ‘:enter’
  • for * => void we can use ‘:leave’

The aliases make these transitions more readable and easier to understand.

Add the following trigger definition in the animation property:

trigger('EnterLeave', [ state('flyIn', style({ transform: 'translateX(0)' })), transition(':enter', [ style({ transform: 'translateX(-100%)' }), animate('0.5s 300ms ease-in') ]), transition(':leave', [ animate('0.3s ease-out', style({ transform: 'translateX(100%)' })) ]) ])

Here we have defined the trigger EnterLeave. The ‘:enter’ transition will wait for 300ms and then run for 0.5s with an ease-in effect. Whereas the ‘:leave transition will run for 0.3s with an ease-out effect.

Add the following HTML code in the app.component.html file:

Enter and Leave animation
 Add List Remove List 
     
    
      
  •  {{list}} 
    •

Here we are defining two buttons to add items to and remove them from the list. We are binding the EnterLeave trigger to the <li> element that will show the enter and leave effect while being added and removed from the DOM.

Open the browser to see the animation in action as shown below:

Conclusion

In this article, we’ve learned about Angular 6 animations. We explored the concept of animation states and transitions. We also saw a few animations in action with the help of a sample application.

Please get the source code from GitHub and play around to get a better understanding.

If you’re preparing for interviews, read my article on C# Coding Questions For Technical Interviews.

See Also

  • ASP.NET Core — Using Highcharts With Angular 5
  • ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
  • CRUD Operations With ASP.NET Core Using Angular 5 And ADO.NET
  • ASP.NET Core — Getting Started With Blazor
  • CRUD Using Blazor with MongoDB
  • Creating An SPA Using Razor Pages With Blazor

Originally published at //ankitsharmablogs.com/