Animaciones en Angular 12: Guía paso a paso para principiantes

Las animaciones en Angular proporcionan la ilusión de movimiento: los elementos HTML cambian de estilo con el tiempo.

Las animaciones bien diseñadas pueden hacer que su aplicación sea más divertida y fácil de usar, pero no son solo cosméticas.

Las animaciones pueden mejorar su aplicación y la experiencia del usuario de varias maneras:

Sin animaciones, las transiciones de la página web pueden parecer abruptas y discordantes.
Motion mejora enormemente la experiencia del usuario, por lo que las animaciones les dan a los usuarios la oportunidad de detectar la respuesta de la aplicación a sus acciones.
Las buenas animaciones llaman intuitivamente la atención del usuario hacia donde se necesita.

Por lo general, las animaciones involucran múltiples transformaciones de estilo a lo largo del tiempo. Un elemento HTML puede moverse, cambiar de color, crecer o reducirse, desvanecerse o deslizarse fuera de la página.

Estos cambios pueden ocurrir simultáneamente o secuencialmente. Puedes controlar el tiempo de cada transformación.

El sistema de animación de Angular se basa en la funcionalidad CSS, lo que significa que puedes animar cualquier propiedad que el navegador considere animable.

Esto incluye posiciones, tamaños, transformaciones, colores, bordes y más. El W3C mantiene una lista de propiedades animables en su página de Transiciones CSS.

Contenidos

Crear una Animación en Angular

En este ejemplo de animación Angular, veremos cómo importar el módulo de animaciones angulares y usarlo en nuestra aplicación.

Angular ofrece la capacidad de crear animaciones atractivas y activarlas en función de una variedad de factores. Puedes colocar animaciones en cualquier elemento HTML y hacer que ocurran según los ciclos de vida o los eventos.

Primero, necesitas instalar Angular Project a través de Angular CLI.

Paso 1: Instalar Angular CLI globalmente

Presiona el siguiente comando en tu terminal.

npm install -g @angular/cli

Paso 2. Crea un nuevo proyecto

Escriba el siguiente comando.

ng new nganimations

Paso 3: Servir la solicitud

Ve al directorio del proyecto e inicie el servidor.

cd my-app 
ng serve --open

Paso 4: Importar módulo de animaciones

Ve al archivo app.module.ts y agrega el siguiente código.

// app.module.ts

import {  BrowserAnimationsModule } from '@angular/platform-browser/animations';

 imports: [
    BrowserModule, BrowserAnimationsModule
 ],

Paso 5: Utilizar el framework CSS de Bootstrap

Ve al sitio web oficial de Bootstrap. Usaremos el CDN y pegaremos esos enlaces en nuestro archivo index.html.

<!-- index.html -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nganimation</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Paso 6: Crear un componente de animación

En la carpeta src >> app, crea un archivo TypeScript llamado animate.component.ts.

// animate.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-animate',
  template: `<div class="myblock mx-auto"></div>`,
  styles: [`
  .myblock {
    background-color: green;
    width: 300px;
    height: 250px;
    border-radius: 5px;
    margin: 5rem;
  }
  `]
})

export class AnimateComponent {}

Luego, importa ese componente en el archivo app.module.ts.

// app.module.ts

import { AnimateComponent } from './animate.component';

declarations: [
    AppComponent, AnimateComponent
],

Incluye el selector en el archivo app.component.ts.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: ``,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 5 Animations Tutorial';
}

Entonces, en el navegador, el componente Rectángulo verde se debería ver tal que así: Siendo un rectángulo verde.

Paso 7: Crear los botones para activar la animación

A continuación, debes definir la cuadrícula adecuada en el archivo app.component.ts para colocar los botones en el navegador y activar el evento de animación en función del evento de clic.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-12 buttonanimate">
            <div class="col-md-6">
              <a class="btn btn-danger">Animate1</a>
            </div>
            <div class="col-md-6">
              <a class="btn btn-warning">Animate2</a>
            </div>
        </div>
        </div>
        <div class="col-md-3">
        </div>
      </div>
      <div class="col-md-6">

      </div>
    </div>
  </div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 5 Animations Tutorial';
  nextState = 'normal';
  animateSquare(state) {
    this.nextState = state;
  }
}

Aquí, se completa el código para botones. Definiendo dos botones. Cuando el usuario haga clic en el botón, llamará a la función que cambia el estado de la animación.

Ahora, se necesita conectar el estado modificado al código de animación para cambiar el diseño del cuadrado.

El archivo app.component.css tendría este aspecto.

.buttonanimate{
  margin: 5rem;
}

Paso 8: Escribir el código css de la animación

Importadas las funciones de animación dentro del archivo. Cuando el usuario hace clic en el botón, este bloque animado activará un estado de cambio y reaccionará en consecuencia.

Hemos escrito la lógica; cuando se hace clic en el botón, se transformará de un estado normal a un estado animado o de un estado animado a un estado normal.

// animate.component.ts

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

@Component({
  selector: 'app-animate',
  template: `<div class="myblock mx-auto"></div>`,
  styles: [`
  .myblock {
    background-color: green;
    width: 300px;
    height: 250px;
    border-radius: 5px;
    margin: 5rem;
  }
  `],
  animations: [
    trigger('changeState', [
      state('normal', style({
        backgroundColor: 'green',
        transform: 'scale(1)'
      })),
      state('animated', style({
        backgroundColor: 'blue',
        transform: 'scale(1.5)'
      })),
      transition('*=&gt;normal', animate('800ms')),
      transition('*=&gt;animated', animate('200ms'))
    ])
  ]
})

export class AnimateComponent {
  @Input() currentState;
}

En el código, @Input se usará para recibir la propiedad del componente principal. Por lo tanto, obtienes el estado del componente principal y cambiará de acuerdo a él.