Weiter mit unserer Animation Übung aus dem vorherigen Teil eins.
Wir werden einige weitere Animationen zu unserer Winkelanwendung hinzufügen.
Insbesondere fügen wir eine Animation hinzu, die ausgelöst wird,
wenn die Routenänderungen innerhalb unserer einseitigen Anwendung auftreten.
Wir werden auch eine Animation hinzufügen, die es ermöglicht, dass
eine Ansicht angezeigt wird, wenn die Daten von der Serverseite abgerufen werden.
Wenn Sie also das Zahlenauswahlfeld in Ihrer Ansicht schließen und dann die Ansicht rendern,
möchten wir, dass die Ansicht auf den Bildschirm projiziert wird,
anstatt einfach nur alle plötzlich.
Also, ein paar neue Animationen, die wir in dieser Übung hinzufügen werden.
Auf dem Weg, wenn Sie mehrere Animationen in Ihrer Anwendung haben,
kann es besser sein, den Code auf eine Weise zu refaktorieren, die
überschaubar ist, anstatt
jedes kleine Bit eines Triggers in jede der Dateien
innerhalb unserer Komponenten unserer Winkelanwendung einzufügen.
Lassen Sie uns also alle diese Schritte als Teil zwei der Animationsübung ausführen.
Das erste, was ich tun werde, ist, dass wir
den Code, den wir bereits als Teil einer dieser Animationsübung gemacht haben, umgestalten werden.
Dieser Ansatz, den ich Ihnen hier zeige, ist nur mein Vorschlag.
Sie müssen nicht unbedingt genau so folgen,
aber ich denke, dass dies hilft, den Code viel besser zu organisieren.
Also, was ich tun werde, ist genau so, als hätten wir einen separaten Ordner für Dienste,
wir hatten einen separaten Ordner für die freigegebenen Ressourcen und so weiter,
ich werde einen neuen Ordner namens Animationen erstellen.
Wir werden den gesamten animationsbezogenen Code dort speichern und ihn dann nutzen, indem wir ihn dort importieren,
wo es innerhalb unserer Komponenten in unserer Winkelanwendung erforderlich ist.
Also, wenn ich zu unserem Code gehe,
werde ich im App-Ordner einen neuen Ordner erstellen und ihn nennen Animationen.
In diesem Animationsordner
werde ich eine neue Datei erstellen und aus Mangel an einem besseren Wort
werde ich es app.animation.ts Datei nennen.
Dann importiere ich
die verschiedenen Klassen aus eckigen Animationen, die ich in der DishDetail-Komponente gemacht habe. Wenn Sie
also zur DishDetail-Komponente gehen,
werden Sie sich daran erinnern, dass
ich als erstes diese Zeile in die DishDetail-Komponente hinzugefügt habe.
Ich werde es aus der DishDetail-Komponente ausschneiden und
stattdessen in die App-Animationen einfügen,
so dass, wo immer diese App-Animationen
enthalten sind, indem ich sie in unsere anderen Komponenten importiere,
dies automatisch für die richtige kommt.
Jetzt, innerhalb dieser App-Animationen,
werde ich einige Factory-Funktionen erstellen, die die verschiedenen Trigger exportieren.
Die erste Factory-Funktion, die ich
diese Exportfunktion erstellen und sie Sichtbarkeit nennen werde.
Diese Sichtbarkeitsfunktion gibt den Code zurück, der
dem Trigger entspricht, den wir in der DishDetail-Komponente getan haben.
Also, ich gehe zurück zur DishDetail-Komponente,
werde ich nur diesen gesamten Code für den Trigger von hier ausschneiden und dann zur
App-Animation.ts-Datei zurückkehren und dann
direkt dort in der Funktion hier einfügen.
Dies wird nun zu einer Funktion, die aus meiner DishDetail-Komponente importiert werden kann.
Also, gehen Sie zurück zu DishDetail Komponente.
Jetzt, wo ich den Trigger und andere Klassen importiert
habe, importiere ich jetzt die Sichtbarkeit
aus der App, der Animation der Animation,
und damit diese Funktion mir jetzt in meinem Code hier zur Verfügung steht.
Also, sobald ich das in meinen Animationen mache,
kann ich diese Funktion einfach aufrufen, damit ich
Sichtbarkeit sagen kann, und dann wird der Triggercode jetzt Teil meiner Komponente hier.
Nun, das finde ich eine bessere Möglichkeit, den Code für meine Animationen zu organisieren.
Wenn ich nun den gleichen Trigger in einer anderen Komponente verwenden muss,
kann ich diesem Ansatz einfach folgen, um ihn auch in meine anderen Komponenten aufzunehmen.
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie
einen kurzen Blick auf unsere Anwendung im Browser.
Gehen Sie in den Browser, Sie sehen, dass, wenn ich zur Festplattenkomponente gehe,
die Festplattenkomponente genau dort ist und dann
das gleiche Animationsverhalten wie zuvor hat.
Indem ich den Code refactoring,
habe ich es geschafft, den Code besser zu organisieren und
immer noch genau das gleiche wie Teil einer dieser Übung zu arbeiten.
Wenn Sie nur eine einzelne Animation an einer einzigen Stelle verwendet haben,
funktioniert der vorherige Ansatz einfach gut, aber wenn Sie
mehrere haben und vor allem, wenn Sie den Code in vielen Komponenten
wiederverwenden, dann ist dieser umstrukturierte Ansatz eine viel bessere Möglichkeit, die Lösung zu implementieren.
Das nächste Update, das ich tun werde, ist Animationen zu Routenänderungen hinzuzufügen.
Also, wenn ich von einer Ansicht zu einer anderen Ansicht gehe, also zum Beispiel
von zu Hause zum Menü oder Menü oder zu kontaktieren oder umgekehrt,
dann möchte ich in der Lage sein, diese Änderungen innerhalb meiner Anwendung zu animieren.
Um dies zu tun,
werde ich eine weitere Funktion in die App-Animation.ts-Datei einführen.
Also, wenn ich in die App-Animation.ts-Datei gehe,
werde ich eine andere Funktion exportieren, die ich als FlyInOut aufrufe,
Sie werden sehen, warum ich diesen Namen hier verwende.
Dann würde dies eine Funktion zurückgeben, die ein Trigger mit dem Namen FlyInOut ist.
Also, im Inneren war Trigger,
ich werde den Code für das definieren, was dieser Trigger tun wird.
Also, hier werde ich einen Zustand hier mit dem Namenstern definieren,
also spielt es keine Rolle, welchen Zustand es ist,
dies ist auf jeden Zustand anwendbar und dann werde ich
hier einige Stile definieren und die beiden Stile, die ich
definieren werde, ist Deckkraft eins
und Transformation ist TranslateX (0),
was bedeutet, dass es ist in diesem Fall in seiner normalen Position.
Nun, wenn ich Übergänge definiere,
kann ich auch Übergänge auf diese Weise definieren.
Also, wenn ich sage, geben Sie Übergang,
ist der Enter-Übergang eine Abkürzung, um zu sagen, dass von
void Zustand zu einem der vorhandenen Zustand.
Also, was bedeutet, dass die Ansicht in meine Anwendung eintritt.
Also geben Sie ein, was bedeutet, dass jetzt, wenn ich in
einer bestimmten Ansicht in meiner einseitigen Anwendung weiterleite,
diese Ansicht in die Ansicht eintritt.
Deshalb kann ich in diesem Fall den Doppelpunkt eingeben Übergang anwenden.
Nun gibt es in ähnlicher Weise einen weiteren Übergang namens Doppelpunkt
verlassen, den ich anwenden kann, wenn Sie aus
dieser Ansicht wechseln und dann die Ansicht aus dem Router-Steckplatz Ihrer Anwendung herausnehmen.
Also, wir werden beide eingeben und die andere, die verlassen ist.
Also, zwei Funktionen, die ich hier definieren werde,
Übergang eingeben und Übergang verlassen hier.
Also, für die Eingabe,
was möchte ich definieren?
Für Enter, lassen Sie mich die Funktion hier definieren
, und ähnlich, für Urlaub auch,
werde ich die Funktionen hier definieren.
Also, dieses Gerüst hier zu schaffen.
Jetzt kann ich die Informationen eingeben, die ich in diesen Übergängen möchte.
Also, wenn dieser Übergang auftritt,
werde ich mit einem Transformationsstil beginnen,
TranslateX minus 100 Prozent,
was bedeutet, dass die Ansicht hier vollständig außer der Ansicht ist.
Also, Sie beginnen dort von minus 100 Prozent in diesem Moment.
Also, wenn Sie eintreten,
werden Sie damit beginnen,
und dann auch an dieser Stelle
werde ich animieren und in 500 animieren.
Also, wenn ich 500 so spezifiziere,
können Sie es sogar auf diese Weise tun.
Alternativ können Sie in Anführungszeichen
„500ms“ sagen, und dann können Sie sogar ease-in oder ease-out verwenden.
Also, lassen Sie mich dies in
500ms Ease-In ändern, weil diese Ansicht hereinkommt.
So werden wir die Ansicht erleichtern.
Also, für Urlaub, werde ich den Übergang als animiert anwenden,
und dann würde ich sagen, 500 Millisekunden, wieder, Leichtigkeit.
Also, diese Ansicht geht.
Also, wir wollen diese Ansicht erleichtern.
Dann
ist in diesem Fall der Stil, den ich anwende,
TranslateX 100 Prozent.
Diese Ansicht wird also vollständig vom Bildschirm verschwinden.
TranslateX 100 Prozent.
Außerdem werde ich die Deckkraft auf Null setzen.
Also, verschwindet vollständig vom Bildschirm.
Also, diese Animation wird in eine gute neue Funktion hier hinzufügen.
Nun, für diesen
kann ich auch hinzufügen, beginnend mit einer Deckkraft von Null, wenn Sie es vorziehen.
Lassen Sie uns das hinzufügen und sehen, wie es aussieht.
Also, das ist der FlyInOut-Trigger, den ich hier definiert habe.
Nun fragen Sie sich offensichtlich,
wie verwende ich dieses FlyInOut und wende
dies dann auf Routenübergänge in meiner Anwendung an?
Also, um das zu tun, werden wir zuerst gehen,
beginnend mit Menü component.ts Datei.
Ich werde das
FlyInOut
aus der App-Animation importieren.
Dann, wenn ich zur Komponente gehe,
werde ich jetzt eine neue Eigenschaft namens Host einführen.
Ich werde Ihnen sagen, was in kurzer Zeit in den Gastgeber geht.
Dann werden wir auch die Animationseigenschaft einschließen,
die hier ein Array ist.
Dann, hier drinnen, werde ich das FlyInOut verwenden, das wir gerade importiert haben.
Dieser Animationstrigger wird also für diese Medienkomponente angewendet.
Nun, innerhalb des Hosts,
so stelle ich sicher, dass diese spezielle Animation passiert, wenn Routenänderungen auftreten.
Also, innerhalb dieses Hosts hier,
gebe ich dies als sagen,
@flyInOut und sage true,
und dies sollte auch in Anführungszeichen eingeschlossen werden,
@flyInOut, true, und dann Stil,
Anzeigeblock.
Also, diese beiden sollten in der Host-Eigenschaft hier angewendet werden.
Nun, wenn wir dies tun, beginnt meine Menükomponente jetzt zu animieren,
wenn ich in die Menükomponente gehe,
und dann auch, wenn ich die Menükomponente verlasse.
Jetzt werde ich dasselbe auf die restlichen Komponenten meiner Angular-Anwendung anwenden.
Also, was ich tun werde, ist,
ich werde das einfach kopieren,
und dann werden wir das auf die über Komponente anwenden.
Also, ich gehe zu der über Komponente.
Innerhalb des Komponenten-Dekorators
habe ich die Informationen hier aufgenommen,
und Sie sehen die rote zerquetschige Linie, die mich daran erinnert, dass ich
FlyInOut aus Animationen, App-Animationen importieren muss.
Also, der gleiche Ansatz, über die Komponente,
dann innerhalb der Kontaktkomponente auch das Gleiche,
und dann die Host- und Animationseigenschaften auf den Komponenten-Dekorator anwenden,
und was haben wir dann noch?
Die Home-Komponente. Gehen wir zur Home-Komponente und wiederholen Sie das gleiche hier.
Ich werde den Host und die Animationseigenschaft hinzufügen
und dann
FlyInOut aus App-Animation importieren.
Haben wir welche verpasst? Oh, wir müssen auch die Komponente „Detail“ aktualisieren.
Also, lassen Sie mich auf die Schüssel Detail Komponente gehen.
Da wir dort bereits die Sichtbarkeit haben,
werde ich nur das FlyInOut importieren.
Dann, da wir die restlichen Teile hier bereits eingerichtet haben,
werde ich hineingehen und diesen Code einfügen,
und offensichtlich habe ich hier zwei Animationen.
Lassen Sie mich die Sichtbarkeit von hier aus ausschneiden und
sie dann der anderen Animation hinzufügen,
und schneiden Sie das dann aus, so dass ich eine einzelne Animationseigenschaft habe,
wobei sowohl FlyInOut- als auch Sichtbarkeitsfunktionen eingeschlossen und dort aufgerufen werden,
und dann die Hosteigenschaft.
Speichern wir nun die Änderungen und werfen Sie einen Blick auf
die neue Animation, die wir gerade auf unsere Komponenten angewendet haben.
Beginnen Sie mit der Home-Ansicht.
Also, wir haben die Home-Ansicht hier gerendert.
Lassen Sie mich jetzt schnell zur Ansicht Info gehen,
und dann sehen Sie, dass die Info-Ansicht nur hineingleitet, während
die Startansicht hier in den Bildschirm gleitet.
In ähnlicher Weise
sehen Sie, wenn ich zum Menü gehe, dass die Menüansicht hineingleitet, während die Ansicht Info ausgeblendet wird.
Es ist so schnell, dass du es nicht als solche bemerkst.
In ähnlicher Weise wird in der
Kontaktansicht die Kontaktansicht eingeblendet.
So kann diese Art von Animation hinzugefügt werden, indem Sie
diesen Ansatz verwenden, den wir gerade für Ihre Angular-Anwendung illustriert haben.
Wir sind noch nicht fertig. Wir werden eine weitere Animation innerhalb unserer Anwendung durchführen.
Um zu veranschaulichen, was ich in der nächsten Animation machen möchte,
lassen Sie uns die Menükomponente kurz ansehen.
So sehen Sie, dass, wenn die Menükomponente,
wenn sich der Spinner dreht und dann durch die Ansicht ersetzt wird,
die Ansicht plötzlich auf dem Bildschirm erscheint,
und es ist ein wenig lästig für das Auge.
Du merkst es vielleicht nicht.
Damit bist du vielleicht sehr zufrieden.
Aber wir können in
dieser Ansicht eine Art der Vereinfachung hinzufügen, wenn die Daten vom Server abgerufen werden und die Ansicht in gerendert wird.
Wenn also die Variable des Gerichts in meiner Menükomponente.ts-Datei nicht annulliert wird,
wird der Spinner ausgeblendet und dann die Ansicht des Gerichts,
das Menü wird konstruiert und dann ausgelegt.
Also, wir wollen, dass das in den Bildschirm fließt.
Also, lassen Sie uns eine weitere Animation hinzufügen, um das sowohl in der Menükomponente zu bewirken.
Wir werden das Gleiche auch in der Komponente „Detail“ anwenden.
Wir verwenden das gleiche auch in der Home-Komponente und der About Komponente,
wo wir die Daten abrufen, um die Liste der Führungslinien anzuzeigen.
Also, wo immer Sie Daten vom Server abrufen und dann die Ansicht auslegen,
wenn die Ansicht angezeigt wird,
möchten wir die Ansicht erleichtern, indem Sie diese neue Animation verwenden, die ich als nächstes erstellen werde.
Gehe zur App-Animation.ts-Datei,
werde ich hier eine andere Funktion hinzufügen,
und lassen Sie mich es erweitern nennen.
Diese Funktion erweitert die Ansicht, die
angelegt wird, nachdem die Daten von der Serverseite abgerufen werden.
Also, diese Ansicht, wieder,
werde ich hier einen Auslöser zurückgeben.
Ich werde den Trigger als expandieren benennen,
und dieser Trigger wird erstellt.
Wie definieren wir diesen Trigger?
Also, in diesem Auslöser werden wir einen Staat mit Stern einschließen.
Es spielt also keine Rolle, in welchem Zustand es ist.
Alle Zustände werden mit dem Stil als
Deckkraft 1 Transformation übersetzt x 0 gerendert werden.
Also, es wird rechts und zentriert in meiner Anwendung angezeigt.
Das sollte da eine Klammer sein.
Ich schaute es an und sagte:
Warum zeigt es eine rote zerquetschige Linie.
Also, wenn Sie sehr schnell tippen, machen Sie oft Fehler dort.
Anstelle einer eckigen Klammer
sollte das also eine Klammer sein.
Also, das ist der Staat.
Also, jeder Zustand, dass es vollständig sichtbar und zentriert sein wird, wo es zentriert werden soll.
Lassen Sie mich jetzt einen Übergang auslösen.
Jetzt wird dieser Übergang nur
bei der Eingabe ausgelöst, wenn die Ansicht auf dem Bildschirm ausgelegt ist.
Der Ausgang Teil machen wir es bereits in der Route-Animation, also brauchen wir das nicht.
Wir brauchen nur das Inter-Teil für diese Ansicht, da
die Ansicht dort auf diesem Bildschirm gerendert wird.
Also, im Enter,
werde ich den Übergang entsprechend definieren.
Also, im Übergang, was möchte ich tun?
Ich möchte den gleichen Ansatz anwenden, den ich mit dem Enter-Übergang hier verwendet habe.
Also, ich werde das nur kopieren und dann einige kleinere Anpassungen an dem Code dort vornehmen.
Also, für den Übergang hier auch
möchte ich das Gleiche anwenden.
Ich werde sagen, insta von 100 Prozent zu übersetzen.
Ich werde nur 50 Prozent verwenden und dann werde ich die übersetzen Y tun.
Also, was bedeutet, dass diese Ansicht von den Top 50 Precent fallen wird beginnend mit
Deckkraft Null und dann werde ich es in ein bisschen schneller Zeit,
200 Millisekunden erleichtern und es in unsere Anwendung erleichtern.
Nun sehen Sie hier die geringfügige Anpassung an den Code.
Also, übersetzen minus 50 Prozent und Deckkraft Null und
es wird in 200 Millisekunden erleichtert und dann an diesem Punkt
kann ich diesen Stil als den gleichen Stil anwenden.
Ich werde mich dort bewerben. Also, ich werde diesen Stil einfach kopieren und dann diesen Stil dort anwenden.
Also, wenn es gelockert wird,
wird es hineinkommen und vollständig sichtbar sein, wo es sein sollte.
Also, das ist die Erweiterungsfunktion, die ich hier definiert habe.
Also, wo möchte ich diese Funktion nutzen?
Wir werden zuerst zur Menükomponente gehen und innerhalb der Menükomponente
werde ich nun auch das importieren,
erweitern und dann in meine Animationen hinzufügen und dann wie kann ich diese Erweiterung anwenden?
Also, gehen Sie zu diesem Menü Komponenten Vorlagendatei.
In der Vorlagendatei
werde ich die Erweiterung auf die
Rasterliste anwenden, in der ich dies anwende.
Also, lassen Sie mich kopieren, und dann werden wir auch
auf die Home-Komponente gehen und innerhalb der Home-Komponente auch,
Ich werde die Erweiterung einschließen und dann die Erweiterung der Animation hinzufügen,
und dann gehen Sie auf die Home-Komponenten Template-Datei und dann werde ich anwenden
, dass erweitern Sie die Schüssel Komponenten MD Karte,
auf die Promotion-Komponenten MD-Karte und auch auf die Leader
Komponenten MD-Karte hier, weil alle diese
drei in der Zukunft vom Server abgerufen und dann gerendert werden.
Daher werden die Dish-Komponentendaten bereits vom Server abgerufen.
Nun, das Gleiche geht auf die DishDetail-Komponente.
Ich werde die Expansion zu den Importen hinzufügen und dann
eine Erweiterung in die Animation zur Ansicht der DishDetail-Komponente hinzufügen.
Zusammen mit einer Sichtbarkeit
werde ich auch das Expandieren auf
das Kartendiv dort anwenden und dann auf die Kommentare div auch hier.
Dies befindet sich in der DishDetail-Komponente.
Die Kontaktkomponente hat nichts, das vom Server abgerufen wird.
Also, ich gehe einfach auf die about Komponente und in der about Komponente
werde ich auch das Expandieren und auch in die Animationen einschließen.
Gehen Sie zu der über Komponenten-Vorlagendatei
hier dieser Test hier, der zeigt, dass die Führer von der Serverseite abgerufen werden.
Also, ich werde das Expandieren darüber anwenden.
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie
einen Blick auf unsere eckige Anwendung im Browser.
Gehen Sie zu unserer eckigen Anwendung.
Nun, wenn Sie in die Home-Vorlage gehen,
können Sie sehen, dass die Karten, wenn sie abgerufen wurden,
sie in meine Ansicht gleiteten.
Nun, ähnlich, wenn Sie zu der about Komponente gehen,
sehen Sie, dass, sobald die Daten vom Server abgerufen werden,
dann wird das Rendering der verschiedenen Führungslinien
immer so langsam in die Position in dieser Ansicht hier verschoben.
In ähnlicher Weise
werden wir auf die Menükomponente gehen, hier ein ähnliches Verhalten sehen.
Sobald die Menüdaten fertig sind,
gleitet die Menükomponente direkt dort ein.
Das Gleiche mit dem Gericht Detail Komponenten.
Also, lassen Sie mich zur DishDetail-Komponente gehen und Sie werden sehen, dass
die Ansicht dort eingleitet, aber die
andere Animation, die
verschwindet und diesen Teil wieder auftaucht, funktioniert immer noch wie zuvor.
Sie sehen also, dass wir eine weitere Animation in unsere Angular-Anwendung eingeführt haben.
Nun, ob Sie das mögen oder Sie eine aufwendigere Art und Weise tun wollen, Animationen zu machen,
sicherlich, Sie können verrückt mit
vielen verschiedenen Arten von Dingen mit Ihrer Animation machen.
Ändern Sie viele verschiedene Eigenschaften innerhalb der Stile wie gewünscht und so weiter.
Aber ich hatte das Gefühl, dass ein paar subtile Animationen hier und da
dazu beitragen werden, die Benutzeroberfläche für meine eckige Anwendung zu verbessern.
Also, ich habe in zwei weitere neue Animationen zu meiner Angular-Anwendung hinzugefügt.
Damit schließen wir den zweiten Teil unserer Animationsübung ab.
Ich hoffe, dass
Sie mit diesen beiden Teilen Übung besser verstanden haben, wie Sie
Animationen innerhalb Ihrer Angular-Anwendung verwenden können.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht zu machen, Animationen Teil zwei.