Animazioni in Angular ed effetto dissolvenza
Vedremo come animare elementi di un'applicazione Angular, partendo dalla definizione dell'animazione e applicandola a del testo.
Ultimo aggiornamento: 7 giorni fa
Anche in Angular, così come accade nelle classiche pagine HTML grazie ai CSS, e possibile creare e riutilizzare semplici animazioni in tutti i nostri componenti. Nulla a che vedere chiaramente con il compianto "Flash" della Adobe, ma passo dopo passo, qualcosa si sta smuovendo.
In questo breve tutorial, impareremo a realizzare semplici animazioni di transizione che poi applicheremo per progettare un'animazione più complessa per un elenco di testi (Lista) basato sulla direttiva *ngFor.
Un'animazione di base è la classica animazione di dissolvenza, quella che vedi quotidianamente nei titoli di apertura e chiusura di molti film. Si tratta di mostrare e poi nascondere qualcosa alla vista, solo che il passaggio tra i due stati avviene in modo progressivo e non a scatto. Spesso si applica a scritte di testo ma anche a immagini o intere pagine o finestre in popup.
Qui sotto puoi vedere un semplice esempio applicato a del testo:
Sappiamo già creare del codice per mostrare o nascondere un pezzo del DOM, sfruttando la classica direttiva *ngIf. Un esempio lo puoi vedere qui sotto, dove ho inserito un componente "Dissolvenza" costituito da un pulsante cliccabile che mostra o nasconde una scritta:
@Component({
selector: 'dissolvenza',
template: `
<button (click)="show = !show">ON/OFF</button>
<h1 *ngIf="show">Eccomi visibile!</h1>
`,
})
export class Dissolvenza {
show = true;
}
Quando la proprietà show assume valore booleano "true", l'elemento <h1> del DOM è visualizzato, altrimenti è rimosso completamente. E' chiaro che per rendere il passaggio graduale, dovremo applicare l'animazione prima che la direttiva faccia il suo compito. Vediamo allora i diversi passaggi:
Step 1: Impostare l'app
La prima cosa da fare per gestire le animazioni in Angular è importare il modulo "BrowserAnimationModule" aggiungendolo all'array associato alla proprietà import del modulo radice dell'app.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, BrowserAnimationsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 2: Impostare un componente animato
Al fine di dotare il componente di sezioni animate, è necessario aggiungere una proprietà animation all'interno del decoratore @Component. La proprietà può memorizzare da una a molte animazioni, a seconda di quali abbiamo la necessita di usare per il componente.
@Component({
selector: 'dissolvenza_btn',
template: `
<button (click)="show = !show">ON/OFF</button>
<h1 *ngIf="show">Eccomi visibile!</h1>
`,
animations: [ // qui definiremo l'animazione ]
})
export class Dissolvenza {
show = true;
}
Step 3: Progettare l'animazione
Per definire il corpo dell'animazione, ossia quello che dovrà fare, dobbiamo sfruttare la funzione trigger. Questa accetta due parametri: il primo rappresenta il nome che vogliamo dare all'animazione, e che ci servirà per referenziarla all'interno del template del componente. Il secondo parametro è costituito da un array, che descrive il comportamento dell'animazione. In particolare si sfrutta la funzione transition, indicando nei vari stati (es. :enter = elemento aggiunto nel DOM, :leave = elemento tolto dal DOM) l'effetto che si vuole ottenere.
Come puoi osservare dal codice qui sotto, l'effetto non è altro che una variazione di alcune proprietà CSS, proprio come accade con le classiche pagine web. In particolare si sfrutta style() per impostare la proprietà CSS che intendiamo modificare e la classica funzione animate, per indicare in che modo e che valore questa assume nel tempo.
import { trigger, transition, style, animate, query } from '@angular/animations';
//...
animation = [
trigger('dissolvenza', [
transition(':enter', [
style({ opacity: 0 }), animate('400ms', style({ opacity: 1 }))
]),
transition(':leave', [
style({ opacity: 1 }), animate('400ms', style({ opacity: 0 }))
])]
);
// Altre eventuali animazioni
]
Leggendo le righe qui sopra, possiamo dire che abbiamo impostato un'animazione dal nome dissolvenza, che agisce sulla proprietà CSS opacity, variandone il valore con una semplice animazione della durata di 400 ms, non appena l'elemento viene aggiunto nel DOM o non appena viene tolto. Come puoi osservare, ci sono degli elementi molti simili a quello che sei abituato a fare nel mondo CSS.
NB: Osserva come siano stati anche importate le funzioni dalla libreria animation di angular.
Step 4: Applicare l'animazione
Il passo finale è quello di applicare l'animazione al componente o referenziare l'animazione. Per farlo sarà sufficiente spostarsi nel template e aggiungere all'elemento che si vuole animare, il nome scelto, ossia il primo parametro della funzione trigger, ricordandosi di farlo precedere dal simbolo @:
@Component({
selector: 'dissolvenza_btn',
template: `
<button (click)="show = !show">ON/OFF</button>
<h1 @dissolvenza *ngIf="show">Eccomi visibile!</h1>
`,
animations: [ //...]
})
export class Dissolvenza {
show = true;
}
Il risultato che otterrò è che non appena il componente viene renderizzato nella pagina, la direttiva *ngIf è valorizzata con true quindi farà visualizzare la scritta presente nel tag <h1> ma essendoci un riferimento ad un'animazione, saranno applicate delle proprietà CSS con i valori stabiliti dall'animazione.
Ora che abbiamo capito le basi di come si crea un'animazione in Angular, vediamo di applicarla a casa più sofisticati nel prossimo tutorial.
Hai tempo per leggere? Angular
Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo. Prenotalo cliccando l'immagine qui sotto
Categoria: Angular