[MUSIC]
Lassen Sie uns einen kurzen Überblick über die Animationsunterstützung in Winkel bekommen, bevor wir gehen und
versuchen, unsere Hand bei der Umsetzung einiger Animationen in unserer Winkelanwendung.
Wie Sie erkennen,
fügen Animationen selbst nicht zur Funktionalität Ihrer Angular-Anwendung hinzu.
Dann stellt sich die Frage, warum Animationen verwenden?
Wenn Sie es nun aus der Benutzererfahrung oder aus der
Perspektive des Benutzeroberflächendesigns betrachten, dann beginnen Sie zu sehen, dass Animationen
eine Bedeutung und einen Zweck für ihre Verwendung in einer Anwendung haben.
Die geben visuelles Feedback an den Benutzer über
Dinge, die innerhalb Ihrer Winkelanwendung geschehen.
So können Sie eine Anwendung vollständig frei von Animationen haben und
dass es immer noch die gleichen Funktionen bietet.
Das ist also etwas, das wir beachten müssen,
wenn wir Animationen in unsere Winkelanwendung einführen.
Animationen sind nicht notwendig oder erforderlich, aber
sie fügen diese kleine Würze zu Ihrer Winkelanwendung hinzu. Wenn Sie diese Ansicht im
Kopf behalten, werden Sie sich der Animation aus einer völlig anderen Perspektive nähern.
Es ist, als ob Sie nicht zu viel Salz in Ihre Gerichte geben, nur weil Salz Geschmack hinzufügt.
Zu viel Salz verwöhnt auch Ihr Gericht.
Das gleiche mit Animationen auch.
Zu viele Animationen und Sie enden mit einem verwirrten Benutzer.
Aber Animationen, die subtil hinzugefügt werden, um den Benutzern Vorschläge zu
geben, oder visuelles Feedback an die Benutzer zu geben, fügen Ihrer Winkelanwendung viel Wert hinzu.
Nun zum Glück
kommt der eckige Materialrahmen, den wir bereits in unserer Winkelanwendung verwenden, mit einem eigenen eingebauten Satz von Animationen.
In der Tat, das ist der Grund, warum wir das Browser-Animationsmodul aufgenommen haben.
In unsere Winkelapplikation direkt am Anfang, da
Winkelmaterial bereits die Animationsunterstützung nutzt, die
eckig durch oder seine Animation bereitstellt.
Daher
verwendet die Winkelmaterialbibliothek die vorgeschlagenen Animationen, die mit dem Materialdesign geliefert werden.
Dinge wie zum Beispiel, wenn Sie auf eine Schaltfläche klicken,
die Welligkeit Effekte, die Sie auf der Schaltfläche sehen,
und die subtile Vergrößerung, Verkleinerung von verschiedenen Teilen Ihrer Ansicht usw.
Diese werden bereits durch den Materialdesign-Ansatz vorgeschlagen, und
so nimmt Winkelmaterial bereits viele dieser Dinge an.
Also, auch ohne explizit Anstrengung,
erhalten Sie automatisch einige der erforderlichen Animationen in
Ihre Winkelanwendung, nur durch die Verwendung von Winkelmaterial.
Aber nehmen Sie an, Sie möchten Ihr eigenes Gewürz zu der Mischung hinzufügen.
Wie nähern Sie sich dann Animationen in eckigen?
Das werden wir in diesem Vortrag schnell betrachten.
Und dann gehen Sie zu der Übung, wo wir Fu implementieren und sehen, ob wir
Sinn machen oder ob sie einen Unterschied machen, wie Sie Ihre Angular-Anwendung wahrnehmen.
Die Idee hinter Angulars Unterstützung für
Animationen ist, dass es Ihnen ermöglicht, Animationen mit nahezu
nativer Leistung von dem zu erstellen, was Sie mit reinen CSS-Animationen erhalten.
Jetzt können Sie sich sofort in Ihrem Kopf fragen,
warum nicht einfach reine CSS-Animationen verwenden?
In der Tat können Sie das auch tun, aber es gibt nichts, was Sie davon abhält,
reine CSS-Animationen in Ihrer Angular-Anwendung zu verwenden.
Aber der Vorteil der Verwendung
des Winkelansatzes für die Einführung
von Animationen ist, dass angular, vor allem, nutzt die Unterstützung der Web-Animations-API, die
in den moderneren Versionen von all diesen Browsern unterstützt wird.
Nun, wenn Ihre Browserversion bereits die Web Animations API unterstützt,
dann verwenden Sie Angular einfach einen Start, um
die Animationen zu unterstützen, die Sie in Ihre Angular-Anwendung einschließen.
Wenn nicht, müssen Sie eine Polyfill
namens web-animations.min.js in Ihre Angular-Anwendung verwenden.
In den Übungen werden wir mit der Annahme beginnen, dass wir auf moderne
Browser abzielen, also schließe ich das Polyfill nicht explizit ein.
Sollten Sie sich dafür entscheiden,
erfahren Sie in der Dokumentation zu eckigen Animationen explizit, wie Sie das für ältere Browser ausfüllen können.
Also, wieder auf die Frage zurückzukommen,
warum nicht reine CSS-Animation verwenden, anstatt Winkelanimation zu verwenden?
Jetzt
kommt hier der Vorteil der Verwendung von Angular-Animation in Ihrer Anwendung in den Vordergrund.
Die Tatsache, dass Angular-Animationen eng
mit Ihrem Code verbunden sind, den Sie für Ihre Angular-Anwendung schreiben.
Und daher können Sie viele dieser Animationen auslösen, die
direkt an die Art und Weise gebunden sind, wie sich Ihre Winkelanwendung entwickelt und
was innerhalb Ihrer Winkelanwendung vor sich geht.
So können Sie es an den Lebenszyklus Ihrer Komponenten binden.
Sie können sie in die verschiedenen Phasen der Änderung der Ansicht selbst binden,
während Sie die Ansicht rendern.
Und so ist dieser Vorteil, den Sie durch die Verwendung der Angular Animationsbibliothek
anstelle von reinen CSS-Animationen erhalten, etwas, das eine Überlegung wert ist.
Wie nähern wir uns Animationen in Angular?
Die Animationen selbst sind um Zustände und
Übergänge zwischen Zuständen im Angular Framework aufgebaut, so dass
wir verschiedene Zustände definieren, Zustand könnte alles sein, außer
Sie möchten als Zustand aus der Perspektive der Animation definieren.
Jede Änderung des Zustands, die Sie verursachen möchten,
kann dazu führen, dass der Animationseffekt ins Bild kommt.
Übergänge entlang der Zustände lösen also das Animationsverhalten
innerhalb Ihrer Winkelanwendung aus.
Wie wir in der nächsten Folie sehen werden, wo ich Ihnen ein Beispiel zeigen werde,
wie Sie Bänder und Übergänge verwenden können, um die Animation auszulösen.
Der Animationsaspekt Ihrer Winkelanwendung
ist also innerhalb des Komponentendekorators definiert, den Sie in Ihren Komponenten verwenden.
So hat der Komponenten-Dekorator eine Eigenschaft Farben Animationen, die
Sie verwenden, um die Werte Trigger für Ihre Animationen zu definieren.
Also habe ich das Wort Trigger benutzt.
In den Übungen werden Sie sehen, wie wir die Trigger für
Animationen implementieren und wie wir die Trigger auf verschiedene Template-Elemente anwenden
und dann diese Animationen unter bestimmten Umständen auslösen.
Und wenn Sie Animationen in Ihrer
Angular-Anwendung verwenden müssen, müssen Sie in erster Linie das Browser-Animationsmodul importieren. Das
haben wir bereits in unserer ersten Übung gemacht, weil
das Animationsmodul des Browsers zur Unterstützung von Winkelmaterial benötigt wurde.
Außerdem, wenn Sie Animationen in Ihren Komponenten implementieren.
Dann benötigen Sie die Hilfe von Radiusklassen wie Trigger, Status
, Stil, animieren,
Übergang, die aus der Angular Animations Library importiert werden müssen.
Und wir werden das in jeder Komponente tun, die Animationen verwenden muss.
Wie in der vorherigen Folie erwähnt,
dreht sich das Animationsverhalten in Ihrer Angular-Anwendung um Zustände und Übergänge zwischen den Zuständen.
Status kann alles sein, was Sie als Staat definieren.
Wie Sie in dem Beispiel sehen, das in der allerersten Übung nach dieser
Vorlesung folgt, wurden 2 Zustände definiert, die als angezeigt und ausgeblendet bezeichnet werden.
Aus dem Namen des Staates
beginnen Sie automatisch zu erraten, was diese beiden Zustände bedeuten.
Wenn Sie nun vom angezeigten Zustand in den ausgeblendeten Zustand wechseln,
löst der Übergang vom angezeigten zum ausgeblendeten Zustand eine Art Animation aus.
Vielleicht werden Sie ein Element in Ihrer
Ansicht verstecken, indem Sie die Deckkraft des Elements ändern, die
Deckkraft bedeutet, wie transparent das Element ist und die Deckkraft
eines bedeutet, dass das Element vollständig undurchsichtig und auf dem Bildschirm sichtbar ist.
Wenn Sie die Deckkraft auf Null setzen, verschwindet das Element vollständig vom Bildschirm.
Wir entfernen dieses Element nicht aus
dem, indem wir dieses Element einfach verstecken, indem wir seine Deckkraft ändern.
Also, dieser Weg wäre etwas, das Sie auslösen können.
Ebenso können Sie die Größe eines Elements ändern.
Sie können die Größe eines Elements erweitern oder zusammenziehen, indem Sie eine Transformation auf
diese Elementeigenschaft anwenden, indem Sie die Skalierungstransformation für das Element verwenden.
Wir werden Beispiele sehen, wie ich in der folgenden Übung sagte.
Alle Animationen, die Sie innerhalb Ihrer Angular-Anwendung
innerhalb der Komponentendirektive mit der Animationseigenschaft beschreiben,
drehen sich also um Zustände und Übergänge zwischen den Zuständen.
Wenn Sie über Zustände und Übergänge sprechen, gibt es einige spezielle
Zustände, die wir berücksichtigen müssen, wenn wir diese Übergänge definieren.
Einer dieser Staaten wird als leerer Staat bezeichnet.
Und Element, das nicht auf dem Bildschirm ist.
Ein Element oder eine Partikelansicht, die nicht an die Ansicht angehängt ist
, wird als im ungültigen Zustand betrachtet.
Wenn also das Element in der Ansicht erscheint,
dass, wenn es zum Beispiel an die angehängt ist, dann übergeht
das Element vom void Zustand in einen der vorhandenen Zustände dieses Elements.
In diesem Fall
können Sie also einen Übergang vom Übergang von void zu einem bestimmten Zustand definieren.
In ähnlicher Weise haben Sie auch einen anderen Status, der als Platzhalterstatus bezeichnet wird, oder
er wird durch Stern definiert, was bedeutet, dass es Ihnen egal ist, welcher Zustand es ist.
Wenn Sie also einen Übergang definieren müssen, können Sie sagen,
wenn Sie von einem
leeren Zustand zum Sternzustand wechseln, also vom void-Zustand zu einem anderen Zustand, den Sie übergehen, können Sie eine bestimmte Transformation anwenden.
Dies sind also die zwei besonderen Möglichkeiten, bestimmte Zustände zu
definieren, wenn Sie Ihre Animation im Komponentendekorator definieren.
So gibt es insbesondere einige Möglichkeiten,
Übergänge zu beschreiben, die für den Kurs von besonderem Interesse sind.
Ein Übergang vom Leerheitszustand in einen beliebigen Zustand kann beschrieben werden, indem Sie einfach
Doppelpunkt eingeben verwenden, anstatt Leere Pfeilstern zu sagen.
So werden Sie sehen, dass wir den Pfeil verwenden,
um Übergänge zwischen dem Zustand zu beschreiben.
Das ist also die Syntax, die Sie sehen werden, wenn ich die Übergänge konstruiere.
In ähnlicher Weise
kann eine Leere zu einem anderen Zustand beschrieben werden, indem Sie einfach Doppelpunkt eingeben verwenden.
Das bedeutet also, dass diese Ansicht in
die Ansicht eintritt, die auf dem Bildschirm ausgelegt wird.
In ähnlicher Weise ein Übergang von einem beliebigen Status in den void-Zustand,
was bedeutet, dass Sie dieses Element aus der Ansicht entfernen.
Das wäre auch, könnte als Doppelpunkt angegeben werden,
was bedeutet, dass dieses Element aus dieser bestimmten Ansicht verlässt.
So sehen Sie mich mit Doppelpunkt eingeben und Doppelpunkt verlassen auch wo ich
die Übergänge in der zweiten Übung beschrieben, die Sie in dieser Lektion sehen werden.
Also, mit diesem schnellen Verständnis von Animationen in eckigen.
Schauen wir uns an, wie wir tatsächlich den Code schreiben.
Und um dies zu tun, werden wir zu den Übungen gehen, wo wir Ihnen zeigen,
wie wir dieses Wissen verwenden, das wir gerade darüber gewonnen haben, wie
Animationen in eckig beschrieben werden, um den Typ Skip Code für die
Konstruktion und Anwendung der Animationen für
verschiedene Elemente innerhalb unserer Ansichten von unsere Komponenten.
( MUSIK)