Angular 6 - Animazioni

Le animazioni aggiungono molta interazione tra gli elementi html. L'animazione era disponibile anche con Angular2. La differenza con Angular 6 è che l'animazione non fa più parte di@angular/core libreria, ma è un pacchetto separato che deve essere importato in app.module.ts.

Per cominciare, dobbiamo importare la libreria come segue:

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

Il BrowserAnimationsModule deve essere aggiunto all'array di importazione in app.module.ts come mostrato di seguito -

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

In app.component.html, abbiamo aggiunto gli elementi html, che devono essere animati.

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class = "rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

Per il div principale, abbiamo aggiunto un pulsante e un div con un'immagine. È presente un evento clic per il quale viene chiamata la funzione di animazione. E per il div, il@myanimation viene aggiunta la direttiva e gli viene assegnato il valore come stato.

Vediamo ora il file app.component.ts dove è definita l'animazione.

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})
export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

Dobbiamo importare la funzione di animazione che deve essere utilizzata nel file .ts come mostrato sopra.

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

Qui abbiamo importato trigger, stato, stile, transizione e animazione da @ angular / animations.

Ora aggiungeremo la proprietà animations al decoratore @Component () -

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Trigger definisce l'inizio dell'animazione. Il primo parametro ad esso è il nome dell'animazione da dare al tag html a cui l'animazione deve essere applicata. Il secondo parametro sono le funzioni che abbiamo importato: stato, transizione, ecc.

Il statela funzione coinvolge i passaggi dell'animazione, tra i quali l'elemento passerà. In questo momento abbiamo definito due stati, più piccolo e più grande. Per stati più piccoli, abbiamo dato lo stiletransform:translateY(100px) e transform:translateY(100px).

La funzione di transizione aggiunge l'animazione all'elemento html. Il primo argomento prende gli stati, cioè inizio e fine; il secondo argomento accetta la funzione animate. La funzione di animazione consente di definire la lunghezza, il ritardo e l'andamento di una transizione.

Vediamo ora il file .html per vedere come funziona la funzione di transizione

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

È stata aggiunta una proprietà di stile nel file @componentdirettiva, che allinea centralmente il div. Consideriamo il seguente esempio per capire lo stesso:

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

Qui, un carattere speciale [``] viene utilizzato per aggiungere stili all'elemento html, se presente. Per il div, abbiamo assegnato il nome dell'animazione definito nel file app.component.ts.

Con un clic di un pulsante chiama la funzione di animazione, che è definita nel file app.component.ts come segue:

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ?larger?? 'smaller' : 'larger';
   }
}

La variabile di stato è definita e riceve il valore predefinito più piccolo. La funzione di animazione cambia lo stato al clic. Se lo stato è maggiore, verrà convertito in minore; e se è più piccolo, verrà convertito in più grande.

Ecco come l'output nel browser (http://localhost:4200/) sarà simile a -

Facendo clic su Click Me pulsante, la posizione dell'immagine viene modificata come mostrato nella seguente schermata:

La funzione di trasformazione viene applicata in ydirezione, che viene modificata da 0 a 100 px quando si fa clic sul pulsante Cliccami. L'immagine viene memorizzata nel fileassets/images cartella.