Angular 4 - Animacje

Animacje dodają wiele interakcji między elementami HTML. Animacja była również dostępna w Angular2. Różnica w stosunku do Angular 4 polega na tym, że animacja nie jest już częścią@angular/core biblioteka, ale jest oddzielnym pakietem, który należy zaimportować do app.module.ts.

Na początek musimy zaimportować bibliotekę w następujący sposób -

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

Plik BrowserAnimationsModule należy dodać do tablicy importu w app.module.ts jak pokazano poniżej -

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 { }

W app.component.htmldodaliśmy elementy html, które mają być animowane.

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

Do głównego elementu DIV dodaliśmy przycisk i element DIV z obrazem. Istnieje zdarzenie kliknięcia, dla którego jest wywoływana funkcja animacji. A w przypadku DIV plik@myanimation dyrektywa została dodana i otrzymała wartość jako stan.

Zobaczmy teraz app.component.ts gdzie animacja jest zdefiniowana.

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';
   }
}

Musimy zaimportować funkcję animacji, która ma być używana w pliku .ts, jak pokazano powyżej.

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

Tutaj zaimportowaliśmy wyzwalacz, stan, styl, przejście i animację z @ angular / animations.

Teraz dodamy właściwość animations do dekoratora @Component () -

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

Wyzwalacz określa początek animacji. Pierwszym parametrem jest nazwa animacji, która ma być nadana znacznikowi html, do którego animacja ma zostać zastosowana. Drugi parametr to zaimportowane przez nas funkcje - stan, przejście itd.

Plik statefunkcja obejmuje kroki animacji, pomiędzy którymi przejdzie element. W tej chwili zdefiniowaliśmy dwa stany, mniejszy i większy. W przypadku mniejszego państwa nadaliśmy styltransform:translateY(100px) i transform:translateY(100px).

Funkcja przejścia dodaje animację do elementu html. Pierwszy argument przyjmuje stany, tj. Początek i koniec; drugi argument akceptuje funkcję animacji. Funkcja animacji umożliwia zdefiniowanie długości, opóźnienia i wygładzania przejścia.

Zobaczmy teraz plik .html, aby zobaczyć, jak działa funkcja przejścia

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

Istnieje właściwość stylu dodana w @componentdyrektywy, która centralnie wyrównuje div. Rozważmy następujący przykład, aby zrozumieć to samo -

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

W tym przypadku znak specjalny [``] jest używany do dodawania stylów do elementu html, jeśli istnieje. Dla elementu div podaliśmy nazwę animacji zdefiniowaną w pliku app.component.ts.

Po kliknięciu przycisku wywołuje funkcję animacji, która jest zdefiniowana w pliku app.component.ts w następujący sposób -

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

Zmienna stanu jest zdefiniowana i otrzymuje domyślną wartość jako mniejszą. Funkcja animacji zmienia stan po kliknięciu. Jeśli stan jest większy, przekształci się w mniejszy; a jeśli jest mniejszy, przekształci się w większy.

W ten sposób dane wyjściowe w przeglądarce (http://localhost:4200/) będzie wyglądać następująco -

Po kliknięciu Click Me przycisk, pozycja obrazu zostanie zmieniona, jak pokazano na poniższym zrzucie ekranu -

Funkcja transformacji jest stosowana w ykierunek, który zmienia się z 0 na 100 pikseli po kliknięciu przycisku Kliknij mnie. Obraz jest przechowywany w plikuassets/images teczka.