Angular7 - Animazioni
Le animazioni aggiungono molta interazione tra gli elementi html. L'animazione era disponibile con Angular 2, da Angular 4 in poi l'animazione non fa più parte della libreria @ angular / core, ma è un pacchetto separato che deve essere importato in app.module.ts.
Per cominciare, dobbiamo importare la libreria con la riga di codice sottostante:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';Il BrowserAnimationsModule deve essere aggiunto all'array di importazione in app.module.ts come mostrato di seguito -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule,
ReactiveFormsModule,
BrowserAnimationsModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }Nel 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. C'è un evento click per il quale viene chiamata la funzione animate. E per il div, viene aggiunta la direttiva @myanimation e viene assegnato il valore come state.
Vediamo ora il file app.component.ts dove è definita l'animazione.
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
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.
La funzione di stato 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 accetta gli stati iniziale e finale, il secondo argomento accetta la funzione animate. La funzione di animazione consente di definire la lunghezza, il ritardo e la facilità 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 nella direttiva @component, 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 dato il nome dell'animazione definito nel fileapp.component.ts file.
Con un clic di un pulsante chiama la funzione di animazione, che è definita nel file app.component.ts file 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.
Questo è come l'output nel browser (http://localhost:4200/) sembrerà -
Facendo clic su Click Me pulsante, la posizione dell'immagine viene modificata come mostrato nella seguente schermata:
La funzione di trasformazione viene applicata nella direzione y, che viene modificata da 0 a 100 px quando si fa clic sul pulsante Cliccami. L'immagine viene memorizzata nel fileassets/images cartella.