[MUSIK]
Wie wir in der vorherigen Vorlesung gelernt haben,
fügen Animationen Ihrer Anwendung viel intrinsischen Wert hinzu.
Es fügt zu einer besseren Benutzererfahrung.
Nun bedeutet das offensichtlich nicht, dass Sie Animationen überall im Ort
werfen, nur um Animationen zu machen.
Sie setzen Animationen an Ort und Stelle, um die Benutzererfahrung besser zu machen.
In dieser Übung machen wir unsere erste Animation
innerhalb unserer Angular Anwendung, die wir bisher entwickelt haben.
Auf dem Weg
lernen Sie, wie Animationen in einer Angular-Anwendung implementiert werden können.
Wir werden diesen Thread im zweiten Teil der Übung fortsetzen, wo
wir weitere Animationen zu unserer Angular-Anwendung hinzufügen werden.
Als wir diesen Kurs begonnen haben,
hatten wir in der allerersten Übung mit Angular bereits das Animationsmodul in unsere Angular Anwendung
in der app.module.ts5 hinzugefügt, so dass wir das Animationsmodul direkt dort importiert haben.
Nun ist der nächste Schritt, zu den Komponenten zu gehen und
dann in der Animation hinzuzufügen, wo immer es erforderlich ist.
Die erste Animation, die wir hinzufügen werden, ist in der dishdetail Komponente hier.
Gehen Sie also zur dishdetail-Komponente,
lassen Sie mich hier ein paar Klassen importieren.
Ich importiere Trigger, Status
, Stil, Animation und Übergang von.
@angular /animationen.
Sobald wir diese importieren, können wir diese bei der Konstruktion unserer Animation nutzen.
Wie fügen Sie einer Komponente eine Animation hinzu?
Wir werden die Animations-Trigger in den Komponenten-Dekorator hier hinzufügen.
Gehen Sie also in den Komponenten-Dekorator nach den Stil-URLs,
und fügen Sie die Animationen als Eigenschaft darin hinzu.
Und dann werde ich hier einen Trigger definieren, den
ich als Sichtbarkeitsauslöser nenne, und
ich werde hier den Sichtbarkeitsauslöser definieren.
Jetzt für diesen Sichtbarkeitsauslöser,
werde ich zwei Zustände definieren, ich werde einen
Zustand wie gezeigt definieren und ich werde einen zweiten Zustand
als, Versteckt definieren.
Also habe ich die Flexibilität, meine Staaten so zu definieren.
Also für den gezeigten Zustand, was möchte ich anwenden?
Also für den gezeigten Zustand werde ich den Stil wie folgt anwenden,
also die Stile, die ich für
den gezeigten Zustand anwenden werde, werde ich transformieren, und
die Transformation, die ich anwenden werde, ist eine Skala von 1,0.
Also möchte ich es in
seiner normalen Größe und
einer Deckkraft von 0 zeigen.
So definiere ich den gezeigten Stil.
Also, und der versteckte Zustand, den ich den Stil als,
Transformieren, werde ich sagen, Maßstab (0.5).
Sie können mit diesen Zahlen herumspielen, um
zu sehen, ob die Animation das ist, was Sie wünschen.
Ich habe auch mit diesen Zahlen herumgespielt, bis ich etwas bekam,
mit dem ich zufrieden war.
Und 0, oder für ihren weiteren gezeigten Zustand, werde ich die Deckkraft als 1 setzen.
Opazität 1 bedeutet, dass es vollständig sichtbar ist.
Opazität 0 bedeutet, dass es vollständig versteckt ist.
Jetzt habe ich hier zwei Zustände definiert, gezeigt und hier im Zustand.
Nun, der Übergang zwischen diesen beiden Zuständen,
werde ich hier definieren, als, wenn ich von einem Zustand in einen beliebigen Zustand gehe,
es spielt keine Rolle, in welchen Zustand ich mich bewege,
die Transformation erfolgt mit einer Animation von 0,5 Sekunden
oder 500 Millisekunden.
Und ich werde mich erholen.
Was ich hier angebe, ist, dass ich mich
innerhalb von 0,5 Sekunden oder 500 Millisekunden bewegen werde, wenn ich vom angezeigten in den ausgeblendeten Zustand oder vom ausgeblendeten in den angezeigten Zustand gehe.
Und dann werde ich den Übergang machen, indem ich ein- und auslöse, also
wird es kein linearer Übergang sein, es wird langsam
eingehen und dann den Übergang erleichtern, so
dass es kein ruckeliger Übergang von einem zum anderen sein wird.
So können Sie diese einfache Ein- oder Aussparung oder Ease-In-Out verwenden,
um anzugeben, wie der Übergang erfolgen soll.
Nun habe ich für diese Animation
die Sichtbarkeit als Auslöser für diese Animation angegeben.
Damit diese Animation nun korrekt funktioniert,
gehe ich in meine dishDetailComponent, und dann werde ich
innerhalb dieser Komponente den Anfangswert für die Sichtbarkeit angeben.
Also werde ich sagen, dass die Sichtbarkeit
anfänglich auf gezeigt eingestellt ist, und dann,
wenn ich von einem Gericht zum anderen wechselt.
Und das passiert, wenn ich das Gericht hier hole.
Also, wenn ich das Gericht von einem Gericht zum anderen ändere,
wird dies verursacht, wenn sich der Routenparameter ändert.
An diesem Punkt werde ich die Animation anwenden.
Ich werde den Auslöser vom angezeigten in den versteckten Zustand wechseln und
dann vom ausgeblendeten in den angezeigten Zustand zurückkehren, wenn das Gericht verfügbar ist.
Also, um diese Transformation anzuwenden.
Also werde ich diese Anweisung in
einen Block hier in dieser Pfeilfunktion einschließen.
Und dann definieren Sie auch diese Sichtbarkeit hier als.
Wenn ich also von einem Zustand in einen anderen übergehe, wenn
ich beginne, die Dish-Informationen von der Serverseite zu holen,
werde ich zuerst das aktuelle Gericht ausblenden, indem ich den
Sichtbarkeitswert auf ausgeblendet setze, was bedeutet, dass das aktuelle Gericht, das
angezeigt wird, aus der Ansicht ausgeblendet wird.
Und dann, wenn das neue Gericht verfügbar wird, erscheint es wieder in die Ansicht.
Um das zu tun, wenn mein Gericht im zweiten Teil,
im Abonnement-Teil verfügbar wird, werde ich als letzte Aussage in diesem Block
sagen, dass diese Sichtbarkeit gleich der hier gezeigten ist.
So wird meine Sicht an diesem Punkt sichtbar.
Jetzt wende ich dies nicht auf die Fehlermeldung an, da ich
diese Sichtbarkeit nur auf die Teile meiner
Vorlage anwenden werde, in denen mein Gericht tatsächlich angezeigt wird.
Nun, wenn es einen Fehler gibt, dann möchte ich nur das richtige Gericht verstecken.
Zeigen Sie dann nur die Fehlermeldung in der Ansicht an.
Also, mit diesen Änderungen an meiner dishDetailComponent.
So können Sie wieder sehen und dies noch einmal erklären.
Wenn ich mit dem Abrufen des neuen Gerichts nach Änderung der Routenparameter beginne,
setze ich die Sichtbarkeit auf ausgeblendet, so
dass sich das aktuelle Gericht, das in der Ansicht angezeigt wird, selbst ausgeblendet.
Und dann, wenn das neue Gericht verfügbar wird, so wird das passieren, wenn
das Abonnement aufgerufen wird, wenn das beobachtbare verfügbar wird.
Und dann, wenn das Gericht verfügbar wird und dann,
setze ich dieses Gericht auf das Gericht, das von dem beobachtbaren zurückkam.
An diesem Punkt werde ich die Sichtbarkeit auf den angezeigten Zustand wiederherstellen.
So, dass mein neues Gericht, das ich geholt habe, auf dem Bildschirm gezeigt werden kann.
Mit dieser Änderung gehe ich jetzt zur Vorlagendatei,
und innerhalb der Vorlagendatei werde ich
die Sichtbarkeit sowohl auf das Gericht hier anwenden.
Also das erste div, wo ich das Gericht anzeige, werde ich
den, Sichtbarkeits-Trigger auf das Gericht anwenden.
Und dann werde ich das gleich setzen,
Sichtbarkeit, was die Variable ist, die ich im Code definiert habe.
Jetzt wende ich dies auf das Gericht hier an und wende das Gleiche auch
auf das zweite div an, wo ich die Kommentare anzeige.
Und das war's.
Lassen Sie mich also alle Änderungen speichern, und dann
schauen wir uns an, wie diese Animation in unserem Beispiel funktioniert.
Gehen Sie zum Browser, jetzt zeige ich ihnen das Menü an.
Lassen Sie mich eines der Gerichte auswählen und dann in den Blick auf die Gerichte hier gehen.
Wenn das Gericht angezeigt wird, beachten Sie, dass jedes Mal, wenn ich von
diesem Gericht zum nächsten Gericht gehe, also durch Klicken auf die rechte.
Dann verschwindet das Gericht, und dann, wenn das neue Gericht verfügbar wird,
wird die Ansicht wieder sichtbar und dann wird das neue Gericht gezeigt.
In ähnlicher Weise kann ich noch einen machen und dann bemerken, dass das neue Gericht,
sobald die Informationen verfügbar sind, wieder sichtbar wird.
Das ist also der Übergang, den ich hier in diesem Beispiel anwende. Wenn Sie
also zurückgehen, können Sie das gleiche Verhalten sehen, das sich wieder wiederholt.
Diese kleine Änderung
der Benutzeroberfläche fügt viel Wert auf die Art und Weise, wie der Benutzer Ihre Anwendung wahrnimmt.
Wie Sie erkennen, fügt dies nicht viel zur Funktionalität Ihrer Anwendung
selbst hinzu, sondern trägt zu einer besseren Benutzererfahrung bei.
Und das ist, wo wir Animationen umsichtig innerhalb unserer
Anwendung anwenden, um bestimmte Benutzererfahrung für den
Benutzer, der Ihre Angular-Anwendung ansieht, aussagekräftiger zu machen, oder die
Anzeige Ihrer mobilen Anwendung, die wir in den späteren Kursen sehen werden.
Damit ist diese Übung für Animationen abgeschlossen.
Wir werden die Animationen Erkundungen in den zweiten
Teil der Übung fortsetzen, der unmittelbar danach auftaucht.
Dies ist ein guter Zeitpunkt für Sie, einen Git-Kommentar mit den Nachrichtenanimationen zu machen,
Teil eins.
( MUSIK)