Angular7 - Animations
Les animations ajoutent beaucoup d'interaction entre les éléments html. L'animation était disponible avec Angular 2, à partir d'Angular 4, l'animation ne fait plus partie de la bibliothèque @ angular / core, mais est un package distinct qui doit être importé dans app.module.ts.
Pour commencer, nous devons importer la bibliothèque avec la ligne de code ci-dessous -
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';le BrowserAnimationsModule doit être ajouté au tableau d'importation dans app.module.ts comme indiqué ci-dessous -
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 { }Dans app.component.html, nous avons ajouté les éléments html, qui doivent être animés.
<div>
<button (click) = "animate()">Click Me</button>
<div [@myanimation] = "state" class = "rotate">
<img src = "assets/images/img.png" width = "100" height = "100">
</div>
</div>Pour le div principal, nous avons ajouté un bouton et un div avec une image. Il existe un événement de clic pour lequel la fonction d'animation est appelée. Et pour le div, la directive @myanimation est ajoutée et reçoit la valeur comme état.
Voyons maintenant le app.component.ts où l'animation est définie.
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';
}
}Nous devons importer la fonction d'animation qui doit être utilisée dans le fichier .ts comme indiqué ci-dessus.
import { trigger, state, style, transition, animate } from '@angular/animations';Ici, nous avons importé le déclencheur, l'état, le style, la transition et l'animation à partir de @ angular / animations.
Maintenant, nous allons ajouter la propriété animations au décorateur @Component () -
animations: [
trigger('myanimation',[
state('smaller',style({
transform : 'translateY(100px)' })),
state('larger',style({
transform : 'translateY(0px)' })),
transition('smaller <=> larger',animate('300ms ease-in'))
])
]Le déclencheur définit le début de l'animation. Le premier paramètre est le nom de l'animation à donner à la balise html à laquelle l'animation doit être appliquée. Le deuxième paramètre sont les fonctions que nous avons importées - état, transition, etc.
La fonction d'état implique les étapes d'animation entre lesquelles l'élément fera la transition. À l'heure actuelle, nous avons défini deux états, plus petit et plus grand. Pour les petits états, nous avons donné le styletransform:translateY(100px) et transform:translateY(100px).
La fonction de transition ajoute une animation à l'élément html. Le premier argument prend les états de début et de fin, le deuxième argument accepte la fonction d'animation. La fonction d'animation vous permet de définir la durée, le délai et la facilité d'une transition.
Voyons maintenant le fichier .html pour voir comment fonctionne la fonction de transition -
<div>
<button (click) = "animate()">Click Me</button>
<div [@myanimation] = "state" class = "rotate">
<img src = "assets/images/img.png" width = "100" height = "100">
</div>
</div>Une propriété de style a été ajoutée dans la directive @component, qui aligne le div de manière centrale. Prenons l'exemple suivant pour comprendre la même chose -
styles:[`
div{
margin: 0 auto;
text-align: center;
width:200px;
}
.rotate{
width:100px;
height:100px;
border:solid 1px red;
}
`],Ici, un caractère spécial [``] est utilisé pour ajouter des styles à l'élément html, le cas échéant. Pour le div, nous avons donné le nom de l'animation défini dans leapp.component.ts fichier.
En cliquant sur un bouton, il appelle la fonction animer, qui est définie dans le app.component.ts fichier comme suit -
export class AppComponent {
state: string = "smaller";
animate() {
this.state = this.state == ‘larger’? 'smaller' : 'larger';
}
}La variable d'état est définie et la valeur par défaut est plus petite. La fonction d'animation change l'état au clic. Si l'état est plus grand, il sera converti en plus petit; et s'il est plus petit, il sera converti en plus grand.
Voici comment la sortie dans le navigateur (http://localhost:4200/) ressemblera à -
En cliquant sur le Click Me bouton, la position de l'image est modifiée comme indiqué dans la capture d'écran suivante -
La fonction de transformation est appliquée dans la direction y, qui passe de 0 à 100 pixels lorsque nous cliquons sur le bouton Cliquez sur moi. L'image est stockée dans leassets/images dossier.