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!