El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Las animaciones en Angular permiten crear experiencias de usuario más atractivas y dinámicas. Angular proporciona un módulo de animación robusto que se basa en la biblioteca de animaciones de Angular (Angular Animation Library). Este módulo permite definir y controlar animaciones de manera declarativa en tus componentes.

Conceptos Clave

Trigger (Disparador): Define un conjunto de estados y transiciones para un elemento animado.
State (Estado): Representa una configuración específica de estilos para un elemento.
Transition (Transición): Define cómo cambiar de un estado a otro.
Animation Metadata (Metadatos de Animación): Incluye style, animate, keyframes, entre otros, que se utilizan para definir las animaciones.

Configuración Inicial

Para utilizar animaciones en Angular, primero debes importar el módulo de animaciones en tu aplicación.

// app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    // tus componentes
  ],
  imports: [
    BrowserAnimationsModule,
    // otros módulos
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creación de Animaciones Básicas

Definición de un Trigger

Un trigger se define en el decorador @Component y se asocia a un elemento en la plantilla.

// my-component.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('0.5s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
})
export class MyComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

Uso del Trigger en la Plantilla

<!-- my-component.component.html -->
<div [@openClose]="isOpen ? 'open' : 'closed'" class="animated-box">
  Contenido animado
</div>
<button (click)="toggle()">Toggle</button>

Explicación del Código

Trigger: openClose define dos estados (open y closed) y las transiciones entre ellos.
State: Cada estado (open y closed) define un conjunto de estilos.
Transition: Define cómo cambiar de un estado a otro usando animate('0.5s') para especificar la duración de la animación.
Template Binding: El atributo [@openClose] se enlaza a la propiedad isOpen del componente para determinar el estado actual.

Ejemplo Práctico: Animación de Lista

Definición de la Animación

// list.component.ts
import { Component } from '@angular/core';
import { trigger, transition, style, animate, query, stagger } from '@angular/animations';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  animations: [
    trigger('listAnimation', [
      transition('* => *', [
        query(':enter', [
          style({ opacity: 0, transform: 'translateY(-100px)' }),
          stagger(100, [
            animate('0.5s', style({ opacity: 1, transform: 'translateY(0)' }))
          ])
        ], { optional: true }),
        query(':leave', [
          stagger(100, [
            animate('0.5s', style({ opacity: 0, transform: 'translateY(100px)' }))
          ])
        ], { optional: true })
      ])
    ])
  ]
})
export class ListComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];

  addItem() {
    this.items.push(`Item ${this.items.length + 1}`);
  }

  removeItem() {
    this.items.pop();
  }
}

Uso de la Animación en la Plantilla

<!-- list.component.html -->
<div [@listAnimation]="items.length">
  <div *ngFor="let item of items" class="list-item">
    {{ item }}
  </div>
</div>
<button (click)="addItem()">Add Item</button>
<button (click)="removeItem()">Remove Item</button>

Explicación del Código

Trigger: listAnimation se aplica a la lista de elementos.
Transition: Define las transiciones para elementos que entran (:enter) y salen (:leave).
Query: Selecciona los elementos que entran y salen para aplicarles animaciones.
Stagger: Aplica un retraso entre las animaciones de los elementos seleccionados.

Ejercicios Prácticos

Ejercicio 1: Animación de Aparición y Desaparición

Objetivo: Crear una animación que haga que un elemento aparezca y desaparezca con un efecto de desvanecimiento.

Instrucciones:

Define un trigger llamado fadeInOut.
Crea dos estados: visible y hidden.
Define transiciones entre estos estados con una animación de desvanecimiento (opacity).

Solución:

// fade.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-fade',
  templateUrl: './fade.component.html',
  styleUrls: ['./fade.component.css'],
  animations: [
    trigger('fadeInOut', [
      state('visible', style({
        opacity: 1
      })),
      state('hidden', style({
        opacity: 0
      })),
      transition('visible <=> hidden', [
        animate('0.5s')
      ]),
    ]),
  ],
})
export class FadeComponent {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

<!-- fade.component.html -->
<div [@fadeInOut]="isVisible ? 'visible' : 'hidden'" class="fade-box">
  Contenido que se desvanece
</div>
<button (click)="toggleVisibility()">Toggle Visibility</button>

Ejercicio 2: Animación de Expansión y Contracción

Objetivo: Crear una animación que expanda y contraiga un elemento.

Instrucciones:

Define un trigger llamado expandCollapse.
Crea dos estados: expanded y collapsed.
Define transiciones entre estos estados con una animación de cambio de tamaño (height).

Solución:

// expand.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-expand',
  templateUrl: './expand.component.html',
  styleUrls: ['./expand.component.css'],
  animations: [
    trigger('expandCollapse', [
      state('expanded', style({
        height: '200px'
      })),
      state('collapsed', style({
        height: '50px'
      })),
      transition('expanded <=> collapsed', [
        animate('0.5s')
      ]),
    ]),
  ],
})
export class ExpandComponent {
  isExpanded = true;

  toggleExpansion() {
    this.isExpanded = !this.isExpanded;
  }
}

<!-- expand.component.html -->
<div [@expandCollapse]="isExpanded ? 'expanded' : 'collapsed'" class="expand-box">
  Contenido expandible
</div>
<button (click)="toggleExpansion()">Toggle Expansion</button>

Conclusión

Las animaciones en Angular permiten crear interfaces de usuario más atractivas y dinámicas. Al entender los conceptos básicos como trigger, state, transition y animate, puedes empezar a crear animaciones personalizadas para mejorar la experiencia del usuario en tus aplicaciones. Practica con los ejercicios proporcionados para afianzar tus conocimientos y explorar más posibilidades con las animaciones en Angular.

Animaciones en Angular

Conceptos Clave

Configuración Inicial

Creación de Animaciones Básicas

Definición de un Trigger

Uso del Trigger en la Plantilla

Explicación del Código

Ejemplo Práctico: Animación de Lista

Definición de la Animación

Uso de la Animación en la Plantilla

Explicación del Código

Ejercicios Prácticos

Ejercicio 1: Animación de Aparición y Desaparición

Ejercicio 2: Animación de Expansión y Contracción

Conclusión

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas