So lassen sich CSS3- und JavaScript-Animationen mit Angular umsetzen

Daten-getriebene Animationen mit AngularJS
Kommentare

Wenn es um das Einfügen von Animationen in Websites geht, scheiden sich die Geister – einerseits bei der Frage, ob sie überhaupt nötig sind, andererseits bei der Entscheidung, was die beste Methode für die Umsetzung ist. Der einfachste Weg ist dabei die Nutzung von CSS3 Transitions, doch auch AngularJS stellt einige Tools zur Verfügung, mit denen sich Animationen auf eine Daten getriebene Art und Weise umsetzen lassen.

Gerade für Entwickler, die eher aus der Arbeit mit jQuery oder anderen Libraries, die mit schwergewichtiger DOM-Manipulation arbeiten, kommen, ist der „Angular-Weg“ oft nur schwer zu visualisieren – gerade, wenn es um die Einbindung von Animationen geht. Ben Simmons zeigt, wie man Animationen mit Angular umsetzen kann.

CSS3 Transitions – auf Angular-Art

Im Gegensatz zu jQuery, konzentriert sich Angular darauf, die View durch die Nutzung von Controllern an ein JavaScript-Objekt zu binden. Das erlaubt es zum Beispiel, View-Werte direkt an einen zugehörigen Wert in einem JavaScript-Objekt zu binden und Änderungen durch Daten-Änderungen auszulösen. Zu den Tools, die Angular Entwicklern zum Erstellen von Animationen zur Verfügung stellt, zählt beispielsweise das ngAnimate-Modul. Dafür wird die Animations-Library zu der HTML-Datei hinzugefügt und das entsprechende Modul als Dependency eingefügt.

Bevor es aber an das Einfügen einer Animation mit Angular geht, ist es wichtig zu verstehen, wie CSS3 Transitions funktionieren. Dabei handelt es sich um Animationen, die es HTML-Elementen erlauben, konstant von einem Style zu einem anderen zu wechseln. Um eine Transition zu definieren, muss das Element dem ein Effekt hinzugefügt werden soll sowie die Dauer des entsprechenden Effekts definiert werden. So kann etwa ein div in einem Container-div erstellt und ihm zwei Klassen hinzugefügt werden, die wiederum mit Transitions auf dem hover– oder dem static-State des Elements versehen werden können.

Eine solche Animation lässt sich auch in einer Angular-App erstellen – und zwar indem Transitions an eine Klasse gebunden werden und eine Klasse für beide Zustände des div-Elements erstellt wird. Das erlaubt es Entwicklern, mit Angulars ng-class-Direktive auf Basis eines Boolean-Werts im $scope zwischen den verschiedenen Klassen zu wechseln. So erhält man am Ende eine Animation, die durch eine Veränderung der Daten ausgelöst wird.

Angulars built-in Direktiven und Events

Angulars built-in Direktiven und Events

Bei dem oben genannten Beispiel, das nochmal ausführlich mit Code-Beispiel in Simmons Artikel dargestellt ist, wird noch nicht $animate genutzt. Dieser Service unterstützt mehrere Direktiven in Angular; zudem sorgt die Einbindung von ngAnimate in das eigene Modul für eine Veränderung bei der Art und Weise, wie Angular built-in-Direktiven handhabt. So werden etwa bei bestimmten Events spezielle Klassen zu dem Element hinzugefügt (siehe Screenshot), die sich für Daten-getriebene Animationen mit Angular verwenden lassen.

JavaScript-Animationen mit AngularJS

Während CSS3 Transitionen noch recht einfach sind, wird es bei CSS3 Animationen schon deutlich komplexer. Auch sie lassen sich jedoch mit Angulars ngAnimate sowie @keyframes-Regeln umsetzen, wie Simmons mithilfe einiger Code-Beispiele in seinem Artikel zeigt. Besonders spannend wird es jedoch bei der Umsetzung von JavaScript-Animationen mit AngularJS. Grundsätzlich hat JavaScript den Vorteil, dass es mittlerweile fast überall zu finden ist und somit auch weitläufig akzeptiert wird – in jedem Fall ist der Support von JavaScript und JavaScript-Animationen besser, als der Support von fortgeschrittenen CSS3-Animationen.

Wird ngAnimate als Dependency des Angular-Moduls eingebunden, fügt es die animation-Methode zum Modul-API hinzu. Sie kann dann zur Registrierung der JavaScript-Animationen und dem Erschließen von Angular-Hooks in built-in Direktiven wie ngRepeat genutzt werden. Dabei erhält die Methode zwei Klassen, className(string) und animationFunction(function). Wichtig ist es zu verstehen, was von der Animationsfunktion zurückgegeben werden muss. Dazu sagt Simmons:

Angular is going to be looking for an object to be returned with keys that match the names of the events that you want to trigger animations on for that particular directive.

Auch hierzu bietet der oben genannte Artikel einige Code-Beispiele, die den ganzen Vorgang noch mal veranschaulichen.

Grundsätzlich, so erklärt Simmons abschließend, trägt das ngAnimate-Modul eigentlich einen irreführenden Namen, denn letztendlich sorgt es nicht für die tatsächliche Animation. Stattdessen erlaubt es Entwicklern Zugriff auf Angulars Event-Loop, sodass sie an den entsprechenden Punkten selbst die nötigen DOM-Manipulationen oder CSS3-Animationen vornehmen können. Ein weiterer Vorteil dieses Vorgangs ist es, dass Animationen nur für eine Direktive geschrieben werden und so ohne größere Probleme auch zu anderen Projekten bewegt werden können – und das kann im Zweifelsfall eine große Arbeitserleichterung sein.

 

Aufmacherbild: Vector old film countdown with scratches and vorse for your animation. von Shutterstock / Urheberrecht: Chocolate grandfather

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -