Angular 2 Animationen

Angular 2 hat seinen Beta-Status verlassen und liegt in einer finalen Version vor. Fester Bestandsteil der Version ist die deklarative Entwicklung von CSS Animationen.

Animationen  die durch Angular gesteuert werden sollen werden innerhalb der konkreten Komponenten festgelegt. Dazu bietet das „@Component“ Element ein entsprechendes Attribut. Im Kern bestehen die hier abgelegten Animationen aus „States“ (festgelegte Zustände) und „Transitions“ (der Übergang zwischen diesen Zuständen) die mit entsprechenden Style- und Animations-Angaben versehen werde können. Die States sind selbst gewählte String-Werte die später in der Anwendung die Animationen triggern.

Hallo Komponente

Schauen wir uns erst einmal ein ganz einfaches Beispiel an (die verwendeten Komponenten wie ‚trigger‘, ’style‘ etc. stammen alle aus dem Modul ‚@angular/core‘):

@Component({
    animations: [
            trigger("fadeIn", [
                transition("void => *", [
                    style({ opacity: 0 }),
                    animate('2s ease'),

                ])
    ]),
    ],
    template: "
<div @fadeIn>...content...</div>
"
})
export class AnimationComponent {...}

Unsere Deklaration beginnt mit einem eindeutigen Bezeichner („trigger), den wir auch später im Template wieder finden werden. In diesem einfachen Beispiel definierten wir keinen eigenen State sondern verwenden zwei Vordefinierte und deklarieren nur die Übergänge zwischen den Beiden. „*“ ist eine Wildcard und bezeichnet jeden Zustand, „void“ bezeichnet den Zustand wenn ein Element noch nicht in der GUI angezeigt wird. Mit „transition“ geben wir nun den Übergang zwischen zwei Zuständen an. In unserem Beispiel handelt es sich um eine klassische Fade In-Animation ( void => * , von „nicht sichtbar“ in einen „beliebig anderen Status“). Innerhalb der „transition“ geben wir nun die Stylings an, die zu Beginn dieser Animation gesetzt werden sollen und die gewünschten Animationsangaben. Das Styling am Ende der Animation wird durch das bestehende CSS definiert. Die Verknüpfung im Template geschieht nun über den angegeben Trigger, dieser wird mit einem vorangestellten „@“ an das HTML-Element geschrieben welches mit der Animation versehen werden soll

ng2_animation_fadein.gif

Mein State

Mit eigenen States können wir den Status einer Animation an unsere Anwendungslogik binden. Ein Beispiel hierzu ist das Starten einer Animation auf Basis einer Benutzerinteraktion. Hierzu definierten wir ein oder mehrere Zustände welche die Styling-Informationen beinhalten welche die HTML-Komponente in diesem Zustand (am Ende der Animation) haben soll. Hier ein Beispiel: (dieses ließe sich auch durch die Verwendung von *ngIf und analog zum ersten Beispiel umsetzen)

@Component({
    animations: [
        trigger('moveInTop', [
            state("true", style({transform: "translateY(0%)", opacity: 1})),
            state("false", style({transform: "translateY(-500%)", opacity: 0})),
            transition("* => 1", [
                style({transform: "translateY(-50%)", opacity: 0}),
                animate("1s")
            ]),
            transition("1 => 0", [
                animate("1s ease")
            ])
        ])
    ],
    template: `<button type="button" class="btn-primary btn-lg" on-click="toggleShow()">Click me</button>\n\
<div [@moveInTop]="show" (@moveInTop.done)="afterAnimation($event)>...content...</div>
`
})
export class AnimationComponent {
    show=false;

    toggleShow(){
        this.show=!this.show;
    }

    afterAnimation(event:AnimationTransitionEvent){
        //...
    }
}

ng2_animation_click

Wir legen zwei Zustände fest „true“ und „false“ und versehen diese mit den Styling-Angaben welche die HTML-Komponente haben soll wenn dieser Zustand aktiv ist (also am Ende der Animation). Der Zustand wird durch ein Attribut in unserem Controller festgelegt („[@moveInTop=’show‘]“) und wird durch einen entsprechenden Button verändert. Ist der Status „false“ ist das Element nicht zu sehen und wird nach oben außerhalb der Anzeige verschoben. Ändert sich nun der State auf „true“ (* => 1) wird zu Beginn der Animation das Styling der Transition angewendet, bevor mit der angegeben Animation-Einstellungen das Styling des States „true“ angewendet wird. Demzufolge wird das DIV zuerst auf die Position -50% verschoben, dann unter Verwendung der Animation auf den Wert 0% verschoben. Ändert sich der State hingegen auf „false“ (1 => 0) wird das Element wieder außerhalb des Bildschirms verschoben und auf nicht sichtbar gestellt. Zusätzlich sehen wir im obigen Beispiel einer der beiden Callbacks für Animationen („start“ und „done“) welche entsprechend des Animationsstatus ausgeführt werden und zum Beispiel dazu genutzt werden können um bei Abschluss der Animation eine weitere Aktion aus zu führen.
Neben den hier gezeigten Möglichkeiten bieten die Animationen von Angular 2 noch einige weitere Features wie automatische Berechnung von Größen und Keyframe- und paralelle Animationen die in der Dokumentation zu finden sind: https://angular.io/docs/ts/latest/guide/animations.html

Demo:
Github – Komponente

Github – Animationen

( es bietet sich an Animationen welche Komponenten übergreifend verwendet werden sollen zentral zu deklarieren, das Beispiel tut dies über eine globale TypeScript Datei „animations.ts“

Advertisements

Über Dominik Mathmann
Dominik Mathmann arbeitet als Berater, Entwickler und Trainer bei der GEDOPLAN GmbH. Auf Basis seiner langjährigen Erfahrung in der Implementierung von Java-EE-Anwendungen leitet er Seminare, hält Vorträge und unterstützt Kunden bei der Konzeption und Realisierung von Webanwendungen vom Backend bis zum Frontend. Sein derzeitiger Schwerpunkt liegt dabei auf der Entwicklung von JSF-Anwendungen. Er sieht die stärker werdende Position von JavaScript-Frameworks jedoch positiv und beschäftigt sich darüber hinaus mit Webframeworks wie AngularJS.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: