El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Les animacions són una part essencial de moltes aplicacions web modernes, ja que poden millorar significativament l'experiència de l'usuari. Angular proporciona un potent sistema d'animacions que permet crear animacions complexes de manera senzilla i eficient.

Introducció a les animacions d'Angular

Angular utilitza el mòdul @angular/animations per proporcionar suport per a animacions. Aquest mòdul permet definir animacions utilitzant una API declarativa que és fàcil d'entendre i utilitzar.

Avantatges de les animacions d'Angular

Declaratives: Les animacions es defineixen de manera declarativa, el que facilita la seva comprensió i manteniment.
Integració: Les animacions estan integrades amb el cicle de vida dels components d'Angular.
Rendiment: Angular optimitza les animacions per garantir un rendiment suau.

Configuració de les animacions

Per utilitzar animacions en una aplicació Angular, primer cal instal·lar el mòdul @angular/animations i importar-lo al mòdul principal de l'aplicació.

Instal·lació del mòdul d'animacions

npm install @angular/animations

Importació del mòdul d'animacions

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

@NgModule({
  imports: [
    BrowserAnimationsModule,
    // altres imports
  ],
  // altres configuracions
})
export class AppModule { }

Definició d'animacions

Les animacions es defineixen utilitzant la funció trigger i altres funcions relacionades com state, style, transition i animate.

Exemple bàsic d'animació

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;
  }
}

Explicació del codi

trigger: Defineix un conjunt d'animacions associades a un nom específic.
state: Defineix l'estil per a un estat específic.
style: Defineix els estils CSS que s'aplicaran.
transition: Defineix les transicions entre estats.
animate: Defineix la durada i altres propietats de l'animació.

Aplicació d'animacions

Per aplicar una animació a un element, utilitza la directiva [@nomDeLAnimació] en el teu HTML.

Exemple d'aplicació d'animació

<div [@openClose]="isOpen ? 'open' : 'closed'" class="my-element">
  Contingut animat
</div>
<button (click)="toggle()">Toggle</button>

Animacions complexes

Angular permet crear animacions més complexes utilitzant funcions com group, sequence i query.

Exemple d'animació complexa

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

@Component({
  selector: 'app-complex-animation',
  templateUrl: './complex-animation.component.html',
  styleUrls: ['./complex-animation.component.css'],
  animations: [
    trigger('complexAnimation', [
      transition('* => *', [
        group([
          animate('1s', style({
            transform: 'translateX(100px)'
          })),
          animate('0.5s', style({
            opacity: 0.5
          }))
        ])
      ])
    ])
  ],
})
export class ComplexAnimationComponent { }

Explicació del codi

group: Permet executar múltiples animacions en paral·lel.
sequence: Permet executar múltiples animacions en seqüència.
query: Permet seleccionar elements dins d'un component per aplicar animacions.

Exercicis pràctics

Exercici 1: Crear una animació de desplaçament

Crea una animació que desplaci un element de l'esquerra a la dreta quan es fa clic en un botó.

Solució

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

@Component({
  selector: 'app-slide-animation',
  templateUrl: './slide-animation.component.html',
  styleUrls: ['./slide-animation.component.css'],
  animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translateX(0)'
      })),
      state('out', style({
        transform: 'translateX(100%)'
      })),
      transition('in => out', animate('0.5s ease-in')),
      transition('out => in', animate('0.5s ease-out'))
    ])
  ],
})
export class SlideAnimationComponent {
  isIn = true;

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

<div [@slideInOut]="isIn ? 'in' : 'out'" class="slide-element">
  Contingut desplaçat
</div>
<button (click)="toggle()">Toggle</button>

Exercici 2: Crear una animació de canvi de color

Crea una animació que canviï el color de fons d'un element quan es fa clic en un botó.

Solució

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

@Component({
  selector: 'app-color-animation',
  templateUrl: './color-animation.component.html',
  styleUrls: ['./color-animation.component.css'],
  animations: [
    trigger('changeColor', [
      state('default', style({
        backgroundColor: 'blue'
      })),
      state('changed', style({
        backgroundColor: 'red'
      })),
      transition('default => changed', animate('0.5s')),
      transition('changed => default', animate('0.5s'))
    ])
  ],
})
export class ColorAnimationComponent {
  isDefault = true;

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

<div [@changeColor]="isDefault ? 'default' : 'changed'" class="color-element">
  Contingut amb canvi de color
</div>
<button (click)="toggle()">Toggle</button>

Conclusió

Les animacions d'Angular proporcionen una manera poderosa i flexible de millorar l'experiència de l'usuari en les aplicacions web. Amb una comprensió bàsica de com definir i aplicar animacions, pots crear efectes visuals atractius i interactius. Practica amb els exemples i exercicis proporcionats per consolidar els teus coneixements i explorar les possibilitats que ofereixen les animacions d'Angular.

Animacions d'Angular

Continguts

Introducció a les animacions d'Angular

Avantatges de les animacions d'Angular

Configuració de les animacions

Instal·lació del mòdul d'animacions

Importació del mòdul d'animacions

Definició d'animacions

Exemple bàsic d'animació

Explicació del codi

Aplicació d'animacions

Exemple d'aplicació d'animació

Animacions complexes

Exemple d'animació complexa

Explicació del codi

Exercicis pràctics

Exercici 1: Crear una animació de desplaçament

Solució

Exercici 2: Crear una animació de canvi de color

Solució

Conclusió

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques