Introducere

Animația este definită ca tranziția de la o stare inițială la o stare finală. Este o parte integrantă a oricărei aplicații web moderne. Animația nu numai că ne ajută să creăm o interfață excelentă, dar face și aplicația interesantă și distractivă de utilizat. O animație bine structurată menține utilizatorul implicat în aplicație și îmbunătățește experiența utilizatorului.

Angular ne permite să creăm animații care ne oferă performanțe native similare cu animațiile CSS. În acest articol, vom afla cum putem crea animații folosind Angular 6.

Vom folosi Visual Studio Code pentru demo-ul nostru.

Condiții prealabile

Instalați codul VS și CLI angular.

Dacă sunteți nou în Angular, consultați articolul meu anterior Noțiuni introductive despre Angular 6.0 pentru a configura mediul de dezvoltare Angular 6 pe mașină.

Cod sursa

Descărcați codul sursă de la GitHub.

Înțelegerea stărilor de animație unghiulară

Animația implică trecerea de la o stare a unui element la alta. Unghiular definește trei stări diferite pentru un element:

  1. Stare nulă – reprezintă starea unui element care nu face parte din DOM. Această stare apare atunci când un element este creat, dar nu este încă plasat în DOM sau elementul este eliminat din DOM. Această stare este utilă atunci când vrem să creăm animație în timp ce adăugăm sau eliminăm un element din DOM. Pentru a defini această stare în codul nostru, folosim cuvântul cheie void.
  2. Starea wildcard – Aceasta este cunoscută și ca starea implicită a elementului. Stilurile definite pentru această stare sunt aplicabile elementului indiferent de starea sa curentă de animație. Pentru a defini această stare în codul nostru, utilizăm * simbol.
  3. Stare personalizată – Aceasta este starea personalizată a elementului și trebuie să fie definită în mod explicit în cod. Pentru a defini această stare în codul nostru, putem folosi orice nume personalizat la alegere.

Timpul tranziției animației

Pentru a arăta tranziția animației de la o stare la alta, definim temporizarea tranziției animației în aplicația noastră.

Unghiular oferă următoarele trei proprietăți de sincronizare:

Durată

Această proprietate reprezintă timpul pe care îl durează animația noastră de la început (starea inițială) până la sfârșit (starea finală). Putem defini durata animației în următoarele trei moduri:

  • Utilizarea unei valori întregi pentru a reprezenta timpul în milisecunde. De exemplu, 500
  • Folosind o valoare șir pentru a reprezenta timpul în milisecunde. De exemplu – „500ms”
  • Folosind o valoare șir pentru a reprezenta timpul în secunde. De exemplu – „0,5s”

Întârziere

Această proprietate reprezintă durata dintre declanșatorul animației și începutul tranziției efective. Această proprietate urmează, de asemenea, aceeași sintaxă ca durata. Pentru a defini întârzierea, trebuie să adăugăm valoarea întârzierii după valoarea duratei într-un format șir – „Întârziere durată”. Întârzierea este o proprietate opțională.

De exemplu:

  • „0.3s 500ms”. Aceasta înseamnă că tranziția va aștepta 500ms și apoi va rula 0,3s.

Ameliorarea

Această proprietate reprezintă modul în care animația accelerează sau decelerează în timpul execuției sale. Putem defini relaxarea adăugându-l ca a treia variabilă în șir după durată și întârziere. Dacă valoarea întârzierii nu este prezentă, atunci relaxarea va fi a doua valoare. Aceasta este, de asemenea, o proprietate opțională.

De exemplu:

  • „0,3s 500ms ușor de introdus” – Aceasta înseamnă că tranziția va aștepta 500ms și apoi va rula pentru 0,3s (300ms) cu efect de ușurință.
  • „300m ușurință”. – Aceasta înseamnă că tranziția va rula pentru 300 ms (0,3 s) cu efect de ușurință.

Crearea aplicației Angular 6

Deschideți promptul de comandă în mașină și executați următorul set de comenzi:

  • mkdir ngAnimationDemo
  • cd ngAnimationDemo
  • ngAnimare nouă

Aceste comenzi vor crea un director cu numele ngAnimationDemo și apoi creați o aplicație angulară cu numele ngAnimation în interiorul acelui director.

Deschideți aplicația ngAnimation folosind codul VS. Acum vom crea componenta noastră.

Navigheaza catre View >> Integrated Terminal. Aceasta va deschide o fereastră de terminal în VS Code.

Executați următoarea comandă pentru a crea componenta.

ng g c animationdemo

Aceasta va crea componenta noastră animationdemo în interiorul /src/app pliant.

Pentru a utiliza animația angulară trebuie să importăm BrowserAnimationsModule care este un modul specific animației din aplicația noastră. Deschideți fișierul app.module.ts și includeți definiția de import așa cum se arată mai jos:

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

@NgModule({ imports: [BrowserAnimationsModule // other imports]})

Înțelegerea sintaxei animației unghiulare

Vom scrie codul nostru de animație în metadatele componentei. Sintaxa animației este prezentată mai jos:

@Component({
// other component properties.
  animations: [
    trigger('triggerName'), [
      state('stateName', style())
      transition('stateChangeExpression', [Animation Steps])
    ]
  ]
})

Aici vom folosi o proprietate numită animations. Această proprietate va lua o matrice ca intrare. Matricea conține unul sau mai multe „declanșatoare”. Fiecare declanșator are un nume unic și o implementare. Starea și tranzițiile pentru animația noastră trebuie definite în implementarea declanșatorului.

Fiecare funcție de stare are un „numeNume” definit pentru a identifica în mod unic starea și o funcție de stil pentru a arăta stilul elementului în acea stare.

Fiecare funcție de tranziție are o stateChangeExpression definit pentru a arăta schimbarea stării unui element și matricea corespunzătoare de pași de animație pentru a arăta cum va avea loc tranziția. Putem include mai multe funcții de declanșare în interiorul proprietății de animație ca valori separate prin virgulă.

Aceste funcții se declanșează, iar starea și tranziția sunt definite în @angular/animations modul. Prin urmare, trebuie să importăm acest modul în componenta noastră.

Pentru a aplica animație pe un element, trebuie să includem numele declanșatorului în definiția elementului. Includeți numele declanșatorului urmat de @ simbol în eticheta elementului. Consultați exemplul de cod de mai jos:

<div @changeSize></div>

Aceasta va aplica declanșatorul changeSize la <div> element.

Să creăm câteva animații pentru a înțelege mai bine conceptele de animație unghiulară.

Schimbați dimensiunea animației

Vom crea o animație pentru a modifica dimensiunea unui <div> element pe un buton faceți clic.

Deschide animationdemo.component.ts fișier și adăugați următoarea definiție de import:

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

Adăugați următoarea definiție a proprietății animației în metadatele componentei:

animations: [
  trigger('changeDivSize', [
    state('initial', style({
      backgroundColor: 'green',
      width: '100px',
      height: '100px'
    })),
    state('final', style({
      backgroundColor: 'red',
      width: '200px',
      height: '200px'
    })),
    transition('initial=>final', animate('1500ms')),
    transition('final=>initial', animate('1000ms'))
  ]),
]

Aici am definit un declanșator changeDivSize și două funcții de stare în interiorul declanșatorului. Elementul va fi verde în starea „inițială” și va fi roșu cu o lățime și înălțime crescute în starea „finală”.

Am definit tranziții pentru schimbarea stării. Trecerea de la starea „inițială” la „finală” va dura 1500 ms și de la starea „finală” la „inițială” va dura 1000 ms.

Pentru a schimba starea elementului nostru vom defini o funcție în definiția de clasă a componentei noastre. Includeți următorul cod în AnimationdemoComponent clasă:

currentState="initial";

changeState() {
  this.currentState = this.currentState === 'initial' ? 'final' : 'initial';
}

Aici am definit un changeState metoda care va schimba starea elementului.

Deschis animationdemo.component.html fișier și adăugați următorul cod:

<h3>Change the div size</h3>
<button (click)="changeState()">Change Size</button>
<br />
<div [@changeDivSize]=currentState></div>
<br />

Am definit un buton care va invoca changeState funcție atunci când faceți clic. Am definit o <div> element și a aplicat animația trigger changeDiv Mărește-l. Când facem clic pe buton, va schimba starea of the

elementul și dimensiunea acestuia se vor schimba cu un efect de tranziție.

Înainte de a executa aplicația, trebuie să includem referința la Animationdemo componentă din interiorul app.component.html fişier.

Deschis app.component.html fişier. Puteți vedea că avem un cod HTML implicit în acest fișier. Ștergeți tot codul și puneți selectorul componentei noastre așa cum se arată mai jos:

<app-animationdemo></app-animationdemo>

Pentru a executa codul, executați fișierul ng serve comandă în fereastra terminalului de cod VS. După executarea acestei comenzi, va cere să se deschidă http://localhost:4200 în browser. Deci, deschideți orice browser de pe computer și navigați la această adresă URL. Puteți vedea o pagină web așa cum se arată mai jos. Faceți clic pe buton pentru a vedea animația.

Cum se foloseste animatia cu Angular 6
Modificați dimensiunea Div folosind animația unghiulară

Animație cu efect de balon

În animația anterioară, tranziția a avut loc în două direcții. În această secțiune, vom învăța cum să schimbăm dimensiunea din toate direcțiile. Va fi similar cu umflarea și dezumflarea unui balon, de unde și numele de animație cu efect de balon.

Adăugați următoarea definiție a declanșatorului în proprietatea animației:

trigger('balloonEffect', [
   state('initial', style({
     backgroundColor: 'green',
     transform: 'scale(1)'
   })),
   state('final', style({
     backgroundColor: 'red',
     transform: 'scale(1.5)'
   })),
   transition('final=>initial', animate('1000ms')),
   transition('initial=>final', animate('1500ms'))
 ]),

Aici, în loc să definim proprietatea lățime și înălțime, folosim proprietatea de transformare pentru a modifica dimensiunea din toate direcțiile. Tranziția va avea loc atunci când starea elementului este modificată.

Adăugați următorul cod HTML în app.component.html fişier:

<h3>Balloon Effect</h3>
<div (click)="changeState()" 
  style="width:100px;height:100px; border-radius: 100%; margin: 3rem; background-color: green"
  [@balloonEffect]=currentState>
</div>

Aici am definit un div și am aplicat stilul CSS pentru a-l face cerc. Dacă faceți clic pe div, veți invoca fișierul changeState metoda de comutare a stării elementului.

Deschideți browserul pentru a vedea animația în acțiune, așa cum se arată mai jos:

1612091833 875 Cum se foloseste animatia cu Angular 6
Animație cu efect de balon folosind Angular 6

Animație Fade In și Fade Out

Uneori vrem să afișăm animație în timp ce adăugăm sau eliminăm un element din DOM. Vom vedea cum să animăm adăugarea și eliminarea unui articol într-o listă cu efect de fade-in și fade-out.

Adăugați următorul cod în AnimationdemoComponent definiția clasei pentru adăugarea și eliminarea elementului dintr-o listă:

listItem = [];
list_order: number = 1;

addItem() {
  var listitem = "ListItem " + this.list_order;
  this.list_order++;
  this.listItem.push(listitem);
}
removeItem() {
  this.listItem.length -= 1;
}

Adăugați următoarea definiție a declanșatorului în proprietatea animației:

trigger('fadeInOut', [
  state('void', style({
    opacity: 0
  })),
  transition('void <=> *', animate(1000)),
]),

Aici am definit declanșatorul fadeInOut. Când elementul este adăugat la DOM, este o tranziție de la nul la comodin void =>stat. Aceasta se notează folosindng * =>; *. Când elementul este eliminat din DOM, este o tranziție de la wildcard

la starea nulă. Aceasta este denumită usi <; nul. from voiCând folosim aceeași sincronizare a animației pentru ambele direcții ale animației, folosim sintaxa de prescurtaret; * and ; =>. După cum este definit în acest declanșator, animația

d = & g

<h3>Fade-In and Fade-Out animation</h3>

<button (click)="addItem()">Add List</button>
<button (click)="removeItem()">Remove List</button>

<div style="width:200px; margin-left: 20px">
  <ul>
    <li *ngFor="let list of listItem" [@fadeInOut]>
      {{list}}
    </li>
  </ul>
</div>

* => nul va dura 1000 ms pentru a fi finalizat. <Adăugați următorul cod HTML în fișierul app.component.html.

Aici definim două butoane pentru a adăuga elemente și a le elimina din listă. Legăm declanșatorul fadeInOut de

1612091833 174 Cum se foloseste animatia cu Angular 6
li> element, care va afișa un efect de fade-in și fade-out în timp ce este adăugat și eliminat din DOM.

Deschideți browserul pentru a vedea animația în acțiune, așa cum se arată mai jos:

Fade-in și Fade-out animație folosind Angular 6

Intrați și părăsiți animația void => * Când se adaugă la DOM, elementul va intra pe ecran din stânga. La ștergere, elementul va părăsi ecranul din dreapta. * => void Trecerea de la

  • și
  • este foarte frecvent. Prin urmare, Angular oferă aliasuri pentru aceste animații:

pentru void => * putem folosi „: enter”

pentru * => void putem folosi „: leave”

trigger('EnterLeave', [
  state('flyIn', style({ transform: 'translateX(0)' })),
  transition(':enter', [
    style({ transform: 'translateX(-100%)' }),
    animate('0.5s 300ms ease-in')
  ]),
  transition(':leave', [
    animate('0.3s ease-out', style({ transform: 'translateX(100%)' }))
  ])
])

Aliasurile fac aceste tranziții mai lizibile și mai ușor de înțeles. EnterLeaveAdăugați următoarea definiție a declanșatorului în proprietatea animație:

Aici am definit declanșatorul app.component.html . Tranziția „: enter” va aștepta 300ms și va rula apoi 0,5s cu efect de ușurință. În timp ce tranziția „: leave” se va desfășura timp de 0,3 secunde, cu un efect de ușurare.

<h3>Enter and Leave animation</h3>

<button (click)="addItem()">Add List</button>
<button (click)="removeItem()">Remove List</button>

<div style="width:200px; margin-left: 20px">
  <ul>
    <li *ngFor="let list of listItem" [@EnterLeave]="'flyIn'">
      {{list}}
    </li>
  </ul>
</div>

Adăugați următorul cod HTML în EnterLeave fişier: <Aici definim două butoane pentru a adăuga elemente și pentru a le elimina din listă. Suntem obligatorii

declanșator la

1612091834 803 Cum se foloseste animatia cu Angular 6
li> element care va afișa efectul de intrare și ieșire în timp ce este adăugat și eliminat din DOM.

Deschideți browserul pentru a vedea animația în acțiune, așa cum se arată mai jos:

Introduceți și părăsiți animația folosind Angular 6

Concluzie În acest articol, am aflat despre animațiile Angular 6. Am explorat conceptul de stări de animație și tranziții. De asemenea, am văzut câteva animații în acțiune cu ajutorul unui exemplu de aplicație. Vă rugăm să obțineți codul sursă de la

GitHub și jucați-vă pentru a înțelege mai bine.Dacă vă pregătiți pentru interviuri, citiți articolul meu despre

Întrebări de codificare C # pentru interviuri tehnice

CRUD Folosind Blazor cu MongoDB Crearea unui SPA folosind Razor Pages cu Blazor

Publicat inițial la

https://ankitsharmablogs.com/

#Cum #folosește #animația #Angular

Cum se folosește animația cu Angular 6