Angular Logo

Animationen mit Angular 7

Von am 19.02.2019

Mithilfe von Animationen können Websites visuell ansprechender gestaltet werden, indem HTML- Elemente ihr Styling nicht abrupt, sondern über einen voreingestellten Zeitraum ändern. Die Vorteile von Animationen sind aber nicht nur von kosmetischer Art, definierte Übergänge können dem Nutzer auch dabei helfen ausgeführte Aktionen besser zu verstehen und verbessern somit die gesamte User Experience.

Installation

Bevor die Animationen implementiert werden können, muss das Angular- Projekt aufgesetzt werden. Um die gesamte Ordnerstruktur automatisiert zu erstellen, wird die Angular-CLI (Command Line Interface) verwendet, welche mit folgendem Befehl installiert wird:

npm install -g @angular/cli

Nachdem die Angular-CLI erfolgreich installiert ist, kann mit dem folgendem Befehl das Projekt in einem gewünschten Verzeichnis erstellt werden:

ng new animationTest

Um das angelegte Projekt nun zu auf localhost bereitzustellen, wird in dem erstellten Verzeichnis folgender Befehl verwendet:

ng serve

Nun ist die erstellte Web-Applikation auf „localhost:4200“ abrufbar.

Initial erstelltes Angular Projekt auf localhost:4200

Komponente erstellen

Die Web-Applikation ist nun fertig erstellt, gebaut und bereitgestellt. Folglich wird die zu animierende Komponente mit folgendem Befehl erstellt:

ng generate component components/animation

Die Angular-CLI erstellt nun die Komponente „animation“ in dem angegebenen Pfad und legt alle benötigten Files direkt an. Für dieses Projekt sind nur das Template (.html) und der Controller (.ts) relevant.

App-Ordnerstruktur nach Erstellung der Animations-Komponente

Jetzt sind alle Files vorhanden, welche benötigt werden. Schließlich muss die erstellte Komponente nurnoch in der „app.component.html“ eingetragen werden. Dafür wird der gesamte erzeugte Code von der CLI in der „app.component.html“ entfernt und mit folgendem Code ersetzt:

<app-animation></app-animation>

Nach dem Speichern wird die View automatisch neu geladen und sieht wie folgt aus:

Startseite nach Eintragen der erstellten Komponente

Animationen

Imports

Bevor die von Angular bereitgestellten Animationsfunktionen verwendet werden können, müssen 2 Imports getätigt werden:

  1. In der „app.module.ts“:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
app.module.ts nach Import von BrowserAnimationModule

2. In der „animation.component.ts“:

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';
animation.component.ts nach Import der Animationfunktionen

Implementation

Mithilfe der Imports ist es nun möglich auf alle Funktionen zuzugreifen, welche das Animationspaket von Angular bereitstellt. Das gesamte Styling der Animationskomponente wird in diesem Projekt mithilfe der Animationen gesetzt, deshalb bleiben alle von der CLI erstellten css-Files unverändert.

Zunächst wird ein neues Property „animations“ in dem „@Component“ Decorator in „animation.component.ts“ erstellt. Diese Property braucht zunächst einen Auslöser (trigger), welcher auf Zuständsänderungen (state changes) achtet und dementsprechend reagiert. Hierfür wird der trigger „changeState“ definiert, welcher zwei verschiedene states „state1“ und „state2“ beinhaltet. Jeder dieser beiden states hat ein individuelles Styling, welches bei einem state change gewechselt wird. Zusätzlich müssen noch die Übergänge (transitions) zwischen einem state change definiert werden. Diese legen fest wie lange bespielsweise der Übergang von state1 zu state2 dauern soll.

Implementierung des „animations“ Properties in animation.component.ts

Das HTML-Element soll wie ein Expansionpanel anfänglich schmal sein und nach einem state change „aufgeklappt“ werden. Desweiteren wird sowohl die Farbe, als auch die Deckkraft verändert, um den Übergang besser zu visualisieren.

Weiters wird noch eine Variable, sowie eine Methode gebraucht, um die Zustände dynamisch zu ändern. Hierfür wird eine boolesche Variable „state“, sowie eine Methode „toogle()“ angelegt, um diese zu ändern.

Implementierung der dynamischen Zustandsänderung in animation.component.ts

Zum Schluss wird noch das HTML-Element benötigt welches animiert werden soll, sowie einen Button, um die „toggle()“ Methode auszuführen.

Template des animiertes HTML-divs und Toggle-Buttons in animation.component.html

Ergebnis

Das Ergebnis kann nun wie bisher nach abspeichern und einem automatischen page reload betrachtet werden.

Angular Animationen erlauben es in kürzester Zeit mächtige Übergänge zwischen mehrereb Zuständen zu realisieren. Diese können moderne Web-Applikationen nicht nur visuell ansprechender gestalten, sondern Nutzern auch die Möglichkeit geben, Aktionen besser zu verstehen.

Beitrag kommentieren

(*) Pflichtfeld