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:

  1. Sin animaciones, las transiciones de la página web pueden parecer abruptas y discordantes.
  2. 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.
  3. 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.

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.

Relacionado

Entiende que son los monorepositorios y aprender a implementarlos (Ionic, Angular, React, Vue)

Cuando pensamos en crear aplicaciones, normalmente hablamos de una aplicación, un repositorio de git y un resultado de la compilación. Sin embargo, esta configuración de una aplicación y un repositorio no siempre refleja la experiencia del mundo real de los desarrolladores. A menudo, las organizaciones harán ¡SEGUIR LEYENDO!

TypeScript 4.0: Comienza a escribir código más limpio y transparente

El superconjunto JavaScript de código abierto de Microsoft recibe una gran actualización, lo que facilita la escritura de aplicaciones complejas para la Web. Probablemente no debería sorprendernos que JavaScript se haya convertido en uno de los lenguajes de programación más populares en uso en la actualidad. ¡SEGUIR LEYENDO!

Anuncian Rome Tools, Inc.

Hace más de un año, hablábamos de la herramienta Rome, ahora el proyecto ha crecido hasta el punto de consolidarse como un proyecto independiente. El 4 de Mayo, el creador (Sebastian McKinzie) y su cofundador (Jamie Kyle), anunciaron haber recaudado 4.5 millones de dólares de fondos ¡SEGUIR LEYENDO!

Ruta de Aprendizaje del Framework React

Como estudiante de desarrollo de aplicaciones, existen muchas librerías y frameworks que pueden ayudarte a desarrollar tus proyectos. Pero cuando se trata de aprender ReactJS, eso no debería ser una decisión difícil de tomar. Existen razones por las que deberías aprender React. ReactJS (también conocido como ¡SEGUIR LEYENDO!

10 Lenguajes más Buscados por las Empresas 2023

Python, SQL y Java obtienen los tres primeros lugares como lenguajes de programación emás demandados por las empresas, según un nuevo informe de Coding Dojo. Los desarrolladores que quieran avanzar en su profesión y busquen un lenguaje de programación que no solo les atraiga, sino que ¡SEGUIR LEYENDO!