Alles, was Sie über Flip -Animationen in React wissen müssen

Nach dem neuesten Safari -Update wird die Webanimations -API (WAAPI) jetzt ohne Flaggen in allen modernen Browsern (außer IE) unterstützt. Hier finden Sie ein praktisches Beispiel, in dem Sie überprüfen können, welche Funktionen Ihr Browser unterstützt. WAAPI ist eine großartige Möglichkeit, Animationen auszuführen (muss in JavaScript ausgeführt werden), da sie zu einer nativen API gehört - was bedeutet, dass es ohne zusätzliche Bibliotheken funktioniert. Wenn Sie Waapi überhaupt nicht kennen, finden Sie hier eine sehr gute Einführung in die Einführung von Dan Wilson.

Flip ist eine der effektivsten Animationsmethoden. Flip benötigt einen JavaScript -Code zum Ausführen.

Schauen wir uns die Kreuzung mit WAAPI an, drehen und integrieren Sie sie in React. Aber wir beginnen zuerst ohne Reagieren und dann zu reagieren.

Flip und Waapi

Waapi erleichtert Flip -Animation!

Quick Review Flip Review: Die Kernidee besteht darin, das Element zuerst, in dem es enden soll. Wenden Sie als nächstes die Transformation an, um sie auf die Ausgangsposition zu verschieben. Dann diese Conversions abbrechen.

Die Animationsumwandlung ist sehr effizient, daher ist Flip sehr effizient. Vor WAAPI müssen wir den Stil des Elements direkt manipulieren, um die Konvertierung festzulegen und darauf zu warten, dass der nächste Frame ihn absagt/umkehrt:

 // vor Waapi umdrehen
El.Style.transform = `Translatey (200px)`;

RequestAnimationFrame (() => {
  El.Style.transform = '';
});

Viele Bibliotheken basieren auf diesem Ansatz. Damit gibt es jedoch mehrere Probleme:

• Alles fühlte sich wie ein großer Hack an.
• Die Umkehrung von Flip -Animationen ist äußerst schwierig. Obwohl die CSS -Konvertierung nach Löschung der Klasse "frei" umgekehrt ist, ist dies hier nicht der Fall. Das Starten eines neuen Flips, während die vorherige Animation ausgeführt wird, führt zu einem Fehler. Die Inversion erfordert, dass die Transformationsmatrix mit GetComputedStyles analysiert wird und die aktuelle Größe berechnet wird, bevor eine neue Animation eingerichtet wird.
• Fortgeschrittene Animation ist fast unmöglich. Um beispielsweise zu verhindern, dass das Kind des skalierten Elternteils verzerrt wird, müssen wir bei jedem Rahmen auf den aktuellen skalierten Wert zugreifen. Dies kann nur durch Parsen der Transformationsmatrix erfolgen.
• Im Browser gibt es viele Dinge zu achten. Zum Beispiel, manchmal um Flip -Animation in Firefox perfekt auszuführen, müssen Sie den RequestAnimationFrame zweimal anrufen:

 RequestAnimationFrame (() => {
  RequestAnimationFrame (() => {
    El.Style.transform = '';
  });
});

Wir stoßen bei der Verwendung von WAAPI nicht auf diese Probleme. Die umgekehrte Funktion kann leicht umgekehrt werden. Die umgekehrte Skalierung von Kindern ist ebenfalls möglich. Wenn Fehler auftreten, ist es leicht, den Schuldigen herauszufinden, da wir nur einfache Funktionen wie Animate und Reverse verwenden, anstatt verschiedene Dinge wie die RequestAnimationFrame -Methode durchzuwandeln.

Hier ist eine Zusammenfassung der WAAPI -Version:

 el.classList.toggle ('someclass');
const keyframes =/* Berechnen Sie Größe/Positionsdifferenz*/;
El.Animate (Keyframes, 2000);

Flip und reagieren

Um zu verstehen, wie Flip -Animationen in React funktionieren, ist es wichtig zu wissen, wie und vor allem, warum sie in reinem JavaScript arbeiten. Erinnern Sie sich an die Komposition der Flip -Animation:

Alle Inhalte mit einem lila Hintergrund müssen vor dem "Ziehung" -Stief des Renderings stattfinden. Andernfalls werden wir kurz sehen, wie der neue Stil kurz blitzt, was nicht gut ist. Bei React wird die Situation etwas komplizierter, da alle DOM -Updates von uns durchgeführt werden.

Die Magie der Flip -Animation ist, dass Elemente konvertiert werden, bevor der Browser die Möglichkeit hat, zu zeichnen. Woher wissen wir also, dass der Moment "Bevor zeichnet" in React?

Werfen wir einen Blick auf den useLayoutEffect -Haken. Wenn Sie wissen wollen, was es ist ... das ist es! Alles, was wir in diesem Rückruf übergeben, wird nach dem DOM -Update synchron geschehen, aber vor dem Zeichnen . Mit anderen Worten, dies ist ein großartiger Ort, um Flip einzurichten!

Lassen Sie uns etwas tun, das die Flip -Technologie sehr gut ist: animierte DOM -Positionen. Wenn wir animieren wollen, wie Elemente von einer Dom -Position zu einer anderen wechseln, kann CSS nichts tun. (Stellen Sie sich vor, Sie erledigen eine Aufgabe in der To-Do-Liste und verschieben Sie sie in die ausgefüllte Aufgabenliste, genau wie Sie im folgenden Beispiel auf das Projekt klicken würden.)

Schauen wir uns das einfachste Beispiel an. Wenn Sie im folgenden Beispiel auf einen der beiden Blöcke klicken, werden die Positionen ausgetauscht. Ohne Flip passiert es sofort.

Es gibt viel zu tun. Beachten Sie, wie alle Arbeiten im Lebenszyklus -Hakenrückruf erfolgen: useEffect und useLayoutEffect . Was es ein wenig verwirrend macht, ist, dass die Zeitleiste unserer Flip -Animation nicht aus dem Code selbst ersichtlich ist, wie es in zwei React -Renderings geschieht. Folgendes ist die Zusammensetzung der React Flip -Animation, um verschiedene Betriebssequenzen anzuzeigen:

Obwohl useEffect immer nach useLayoutEffect und nach dem Browser -Ziehen läuft, ist es wichtig, dass wir die Position und Größe der Elemente nach dem ersten Rendering zwischenspeichern. Wir haben keine Chance, dies im zweiten Render zu tun, da useLayoutEffect nach allen DOM -Updates ausgeführt wird. Dieser Prozess ist jedoch im Grunde genommen der gleiche wie die gewöhnliche Flip -Animation.

Dinge zu beachten

Wie die meisten Dinge gibt es einige Dinge zu berücksichtigen, wenn Flip in React verwendet wird.

Bleiben Sie innerhalb von 100 Millisekunden

Flip -Animation ist die Berechnung. Die Berechnung dauert Zeit, und Sie müssen einiges an Arbeit leisten, bevor Sie eine reibungslose Umwandlung von 60 fps anzeigen können. Wenn die Verzögerung unter 100 Millisekunden liegt, bemerken die Menschen die Verzögerung nicht. Stellen Sie also sicher, dass alles unter diesem Wert liegt. Die Registerkarte "Performance" in Devtools ist ein großartiger Ort, um diesen Inhalt zu überprüfen.

Unnötiges Rendering

Wir können useState nicht verwenden, um die Größe, Position und Animationsobjekte für Cache zu erhalten, da jeder setState zu unnötigem Rendering führt und die Anwendung verlangsamt. Im schlimmsten Fall kann es sogar zu Fehlern führen. Verwenden Sie stattdessen useRef und behandeln Sie es als ein Objekt, das geändert werden kann, ohne etwas zu rendern.

Layout zittern

Vermeiden Sie das wiederholte Auslösen des Browser -Layouts. Im Kontext der Flip -Animation bedeutet dies, dass Sie das Schleifen durch Elemente und das Lesen ihrer Standorte mit getBoundingClientRect vermeiden und sie dann sofort animate . Batch "lesen" und "schreiben" so weit wie möglich. Dies ermöglicht extrem reibungslose Animationen.

Animation abgesagt

Versuchen Sie, in der vorherigen Demo zufällig auf die Quadrate zu klicken, während sie sich bewegen, und klicken Sie erneut, nachdem sie angehalten werden. Sie werden den Fehler sehen. Im wirklichen Leben interagieren Benutzer mit Elementen, während sie sich bewegen. Es lohnt sich daher, sicherzustellen, dass sie reibungslos storniert, innehalten und aktualisiert werden.

Allerdings können nicht alle Animationen mithilfe von reverse umgekehrt werden. Manchmal möchten wir, dass sie anhalten und dann zu einer neuen Position wechseln (z. B. wenn die Liste der Elemente zufällig gestört wird). In diesem Fall brauchen wir:

• Holen Sie sich die Größe/Position des bewegten Elements
• Vervollständigen Sie die aktuelle Animation
• Berechnen Sie neue Dimensionen und Positionsunterschiede
• Starten Sie eine neue Animation

In React ist dies schwieriger als es scheint. Ich habe viel Zeit damit verschwendet, an diesem Problem zu arbeiten. Das aktuelle Animationsobjekt muss zwischengespeichert werden. Ein guter Weg ist es, eine Karte zu erstellen, um die Animation per ID zu erhalten. Dann müssen wir die Größe und Position des bewegten Elements bekommen. Es gibt zwei Möglichkeiten, dies zu tun:

1. Verwenden von Funktionskomponenten: Schleifen Sie einfach jedes Animationselement im Körper der Funktion durch und zwischen der aktuellen Position.
2. Verwenden von Klassenkomponenten: Verwendung von getSnapshotBeforeUpdate -Lebenszyklusmethoden.

Tatsächlich empfiehlt die offizielle Reaktionsdokumentation, getSnapshotBeforeUpdate zu verwenden, "da zwischen dem Lebenszyklus der Rendering -Phase (z. getSnapshotBeforeUpdate render ) und dem Lebenszyklus der Commit -Phase ( componentDidUpdate .

Kämpfe nicht gegen den Browser

Ich habe es schon einmal gesagt, aber vermeiden Sie es, den Browser zu konfrontieren und zu versuchen, die Dinge auf den Weg des Browsers geschehen zu lassen. Wenn wir Änderungen der einfachen Größen animieren müssen, sollten Sie überlegen, ob CSS ausreicht (z. B. transform: scale() ). Ich fand, dass Flip -Animation am besten geeignet ist, wo Browser wirklich nicht helfen können:

• Animationsdom -Positionsänderung (wie oben beschrieben)
• Gemeinsame Layoutanimation

Die zweite ist eine komplexere Version des ersten. Es gibt zwei DOM -Elemente, die als eines Ganzen wirken und seine Position ändern (und das andere wird deinstalliert/versteckt). Dieser Trick kann einige coole Animationen erreichen. Beispielsweise wird diese Animation mit einer Bibliothek hergestellt, die ich als React-Easy-Flip erstellt habe und diese Methode verwendet:

Bibliothek

Es gibt viele Bibliotheken, die Flip -Animationen in React und abstrakten Boilerplate -Code erleichtern können. Zu den derzeit aktiv gehaltenen Bibliotheken gehören: react-flip-toolkit und meine Bibliothek react-easy-flip .

Wenn Sie nichts schwereres, aber zu allgemeinerer Animation haben, sehen Sie sich framer-motion an. Es ermöglicht auch coole gemeinsame Layout -Animationen! Es gibt ein Video, das die Bibliothek eingehend untersucht.

Ressourcen und Referenzen

• Josh W. Comeaus Animation-nicht animiert
• Aufbau Hochleistungserweiterung und Faltanimationen von Paul Lewis und Stephen McGruer aufbauen
• "Magische Bewegung im Inneren" von Matt Perry
• @KeyFramers twittern "mit animierten CSS -Variablen aus JavaScript".
• Mariko Kosakas "interne Liste der modernen Webbrowser (Teil 3)"
• Alex Holacheks einfache Build -Komplex -UI -Animation in React
• David Khourshids "Animation von Layouts mit Flip -Technologie"
• Kirill Vasildsovs "fließende Animation mit React Hooks"
• Jayant Bhawals "React -Hooks für gemeinsame Elemente verwenden"

Diese überarbeitete Ausgabe behält das Originalbildformat und die Platzierung bei gleichzeitiger Paraphrasierung des Textes, um eindeutige Inhalte zu erstellen. Es befasst sich auch mit kleinen grammatikalischen und stilistischen Problemen.

Das obige ist der detaillierte Inhalt vonAlles, was Sie über Flip -Animationen in React wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!