Angular Animations in eigenen Projekten einsetzen

Angular Animations: Ein schneller Einstieg in die bewegte App-Welt
Keine Kommentare

Animationen stellen eine großartige Möglichkeit dar, um das UX in einer App zu verbessern. Werfen Sie doch nur mal einen Blick auf Material Design von Google! Mit Angular Animations kann man ganz einfach ansprechende Effekten in Apps einzufügen. So gelingt der Einstieg.

Bevor wir darüber sprechen können, um was es sich bei Angular Animations handelt, ist es wichtig zu klären, warum Animationen wichtig sind. Werfen Sie einmal einen Blick auf das Material Design von Google. Eins der Kernprinzipien der Designsprache lautet, dass Bewegung Bedeutung verleiht. Dahinter steht die Idee, dass Bewegung dabei hilft, den Fokus des Nutzers zu steuern und Feedback zu geben.

Animationen im Web lange vor Angular

Das ist nichts neues, denn die Idee gibt es schon seit Jahrzehnten im Bereich der traditionellen Animation. Bewegung ist der Mechanismus, der dazu verwendet wird, einem Betrachter die Absichten des Charakters auf dem Bildschirm zu vermitteln. Diese Bewegungen erlauben es uns zu verstehen, was das animierte Objekt vorhat. Einfacher ausgedrückt, erschafft es den Kontext für eine bestimme Handlung.

Dieses Konzept kann auf unsere Apps angewendet werden, da wir die Bewegung nutzen können, um Kontext zu schaffen und die Benutzerinteraktion in großartige Benutzererlebnisse umwandeln können. Angular Animations basiert auf dem Web Animations API und läuft nativ auf Browsern, die es unterstützen. Falls notwendig, hat es die CSS-Keyframes-Rückruf.

Angular Animations: So geht’s

Also, wie fangen wir damit an, diese fantastischen Benutzererlebnisse zu erstellen? Zuerst müssen wir das Angular-Animations-Modul importieren. Im Wesentlichen ist Angular Animations eine DSL. Durch den Import des BrowserAnimationsModule von @angular/platform-browser/animations können wir damit anfangen, ein paar coole Animationen in unsere App einzufügen. Nach dem Import konfigurieren wir es im NgModule so, wie es unten angezeigt wird.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations’;
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Die Animationen werden über ein auslösendes Property (Trigger) verknüpft. Der Trigger beginnt mit einem @ und wird zum Animieren auf der Komponente platziert. Wenn eine Eigenschaft für ein solches auslösendes Property verändert wird oder wenn ein Element der Stage hinzugefügt oder entfernt wird, wird die zugrunde liegende Animation ausgelöst. Im folgenden Beispiel wird die Animation jedes Mal ausgelöst, wenn sich die Länge der Bilder verändert.

<section [@fade]="images.length" class="gallery-block compact-gallery">
  <div class="container”>
  ...
  </div>
</section>

Für das Element wird die Animation mit dem Trigger fade gestartet, wenn es zu einer Wertveränderung kommt. In einem Fall mit enter und leave, kann ngIf das Element zum DOM hinzufügen oder entfernen, was ebenfalls die Animation auslöst.

Jetzt müssen wir die Animation selbst definieren. Dies geschieht in den Metadaten der Komponente. Wir fügen dem Decorator das Property animations hinzu. Die Animationen sind als eine Reihe von Transitionen konfiguriert, daher haben wir in unserem animations-Array unsere verschiedenen Zustände für die Animation organisiert (z. B. fadeIn und fadeOut). Wir können die Stile definieren, die auf diesen Zuständen in ihnen dargestellt werden sollen. Nach den Zuständen definieren wir die Übergänge, die beschreiben, wie sich die Stile verändern, wenn wir zwischen den definierten Zuständen wechseln.

Mit einem void-Übergang wird ein Element entweder hinzugefügt oder aus dem DOM entfernt. Das *  stellt einen beliebigen Zustand dar. Das ist nützlich, wenn die Elemente mehrfach die Richtung wechseln.

@Component({
  ...
  animations: [
    trigger('fade', [
      transition(‘void => *', [
        style({ opacity: ‘0' }),
        animate('300ms ease-in', style({ opacity: 1 }))
      ]),
      transition('* => void', animate('300ms ease-out', style({ opacity: 0 })))
    ])
  ]
})
export class GalleryComponent {
  ...
}

Wie definieren wir Änderungen am Style? Wir verwenden die Funktionen style und animate. Das sind im Wesentlichen die Funktionen, die die ganze Arbeit erledigen. Wenn wir nur die Style-Funktion verwenden und das Objekt mit CSS-Eigenschaften und Werten übergeben, wird der Style sofort angewendet. Wenn wir in animate und style (oder Keyframes) übergeben, dann wird es das über einen gewissen Zeitraum durchführen.

Um z. B. einen Startzustand mit einer fadeIn-Animation zu setzen, wird ihr ursprünglicher Stil auf opacity: 0 gesetzt. Dann wenden wir die Animationsfunktion mit der entsprechenden Zeit an, wenn wir für den Übergang bereit sind, und der Stil auf opacity:1 gesetzt ist. Der obige Code zeigt ein Beispiel, wo wir zwischen den Komponenten wechseln, die sich in den Bildschirm hinein- und wieder herausbewegen.

<section [@fade]="images.length” (@fade.start)=“triggerTangent($event)">
  <div class="container”>
  ...	
  </div>
</section>

Es wird Fälle geben, in denen wir Feedback über den unterschiedlichen Zustand erhalten wollen, in dem sich die Animation befindet.

Hierfür steht uns der Animations-Rückruf zur Verfügung. Mit der oben definierten Syntax können wir diese Lifecycle-Hooks definieren, z. B. wann die Animation anfing und wann sie endete, so dass wir bei Bedarf weitere Aktionen durchführen können. Jeder Rückruf gibt ein Animationsereignis aus, das alle Informationen über die Animation enthält, wie Name, Zeit, fromState, toState und selbst den phaseName, in dem es sich gerade befindet.

Kostenlos: Das iJS React Cheat Sheet

Sie wollen mit React durchstarten?
Unser Cheatsheet zeigt Ihnen alle wichtigen Snippets auf einen Blick.
Jetzt kostenlos herunterladen!

Download for free

 

API Summit 2018

From Bad to Good – OpenID Connect/OAuth

mit Daniel Wagner (VERBUND) und Anton Kalcik (business.software.engineering)

Dies wird durch die hochwertige Architektur des Angular-Animation-Moduls vervollständigt. Die Animationsmodule gehen jedoch weit darüber hinaus und bieten auch einige komplexere Funktionen an. Diese beinhalten query, group und stagger.

@Component({
  ...
  animations: [
    trigger('fade', [
      transition(‘void => *', [
        query(':enter', [
          style({
            opacity: '0'
          }),
          stagger(30, [
            animate('300ms ease-in', style({ opacity: 1 }))
          ])
        ])
      ]),
      transition('* => void', animate('300ms ease-out', style({ opacity: 0 })))
    ])
  ]
})
export class GalleryComponent {
  ...
}

query wird dazu verwendet, bestimmte Elemente innerhalb der Parent-Komponente auszuwählen und Animationen auf sie anzuwenden. Das Beste daran ist, dass sich Angular um das Setup kümmert sowie um das Beenden und die Bereinigung für diese Elemente, ganz so, wie sie über die Seite koordiniert werden. Zum Beispiel: Ich habe eine Liste von Bildern in einer Galerie. Wenn ich jedes einzelne Element der Galerie auswählen möchte, kann ich die Abfrage verwenden, um alle zu animieren. Oder, wie im obigen Beispiel, kann ich alle (Child-) Elemente in der Ansicht auswählen.

stagger verwendet man mit jQuery. Wie das Wort schon ausdrückt, staffelt stagger mehrere Elemente, wenn sich ihr Stil verändert. In anderen Worten, es verteilt die Animation jedes Elementes, um eine starke Wirkung zu erzielen. Das ist mit group gebündelt, was es Ihnen erlaubt mehrere Animationen zusammenzugruppieren. group ermöglicht es dem Benutzer, komplexe und schöne Animationen in wenigen Zeilen Code zu erstellen. Das obige Beispiel animiert eine Liste in der Ansicht. Der :enter-Aufruf zielt auf die Elemente, die gerade auf dem DOM erstellt wurden und sichtbar werden.

Es gibt noch komplexere Tools, wie animateChlid und AnimationBuilder, die aber nur dann zum Einsatz kommen, wenn man echte Maßarbeit anfertigen muss. Die Grundidee hinter dem Angular Animations-Modul ist die, dass es Ihr de-facto Standard für das Animieren Ihrer Anwendung sein sollte, unabhängig davon, ob es sich um eine einfache Einblendungsanimation oder um eine komplexe Orchestrierung mehrerer Element auf der ganzen Seite handelt.

Credits: Vielen Dank an Lukas und Mattias für dieses tolle Framework.

Ich würde es empfehlen, dass Sie sich deren erstaunliches Open-Source-Projekt ansehen, um mehr über Animations zu erfahren.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -