Erstellen Sie Animationen mit der FLIP-Technik

UI-Animation kann eine unglaubliche Bereicherung sein Benutzererfahrung . Mobile Entwickler wissen das nur zu gut. Mobile App-Animationen sind eher ein zentraler Bestandteil der Erfahrung als ein nachträglicher Gedanke. Im Web werden Animationen jedoch häufig als „das i-Tüpfelchen“ angesehen und weggelassen, da sie als unnötig, übermäßig oder zu komplex für die Implementierung angesehen werden. Schlimmer noch, Animationen ohne Bedeutung können die UX beeinträchtigen.

In diesem Tutorial lernen wir eine bestimmte Kategorie aussagekräftiger Animationen kennen, mit denen Sie möglicherweise vertraut sind. eine, die die Benutzererfahrung verbessert.



Übergang zwischen Ansichten

Wenn Sie in einer mobilen App von einer Ansicht zur anderen wechseln, werden Fokuselemente zwischen den Ansichten häufig reibungslos von einer Position zur anderen animiert. Beispiele hierfür sind:



  • Erweitern eines Fotos aus einer Rastergalerie
  • Neuanordnen von Tabellenzeilen oder Listenelementen
  • Verbleibende Elemente füllen den leeren Bereich, wenn einzelne Elemente gelöscht werden
  • Ein Artikel, der sichtbar in einen Einkaufswagen fällt
  • Eine Textzeile wird vertikal verschoben, wenn eine neue Zeile darunter angezeigt wird
  • Eine Schaltfläche, die sich erweitert oder zusammenzieht, wenn sich ihr Inhalt ändert

Bei der Implementierung dieser Animationen gibt es jedoch ein Problem: Wie animieren Sie ein Element reibungslos zwischen zwei Ansichten oder Zuständen, wenn es tatsächlich vorhanden ist? zwei separate Elemente - eines für jede Ansicht?

Das Pixlr-Farbersetzungswerkzeug funktioniert nicht

Geben Sie das FLIP-Prinzip ein. Dies ist eine Technik zum performanten Übergang von „gemeinsam genutzten Elementen“ zwischen zwei Zuständen. Die Idee ist, dass Sie, wenn Sie die erste Position des gemeinsam genutzten Elements kennen, bevor die Statusänderung erfolgt, die Illusion erzeugen können, dass sich die letzte Position des gemeinsam genutzten Elements von der ersten Position bewegt. So funktioniert das:



  • Zuerst: Ermitteln Sie die Position des freigegebenen Elements, bevor es sich ändert
  • Letzte: Ergreifen Sie die geänderte (endgültige) Position des freigegebenen Elements
  • Umkehren: Berechnen Sie die Änderung der Position (und ggf. der Größe) zwischen der ersten und der letzten Position und verschieben Sie das endgültige gemeinsame Element so, dass es mit diesen Zahlen so aussieht, als wäre es an der Anfangsposition
  • Abspielen: Animieren Sie das letzte gemeinsame Element, indem Sie die Inversion rückgängig machen

Stellen Sie sich zum besseren Verständnis des Umkehrteils dieses Prinzips vor, Sie hätten die Box an der endgültigen Position an einem Gummiband befestigt. Wenn Sie die Box an ihrer Ausgangsposition positionieren, sieht es so aus, als hätte sich die Box überhaupt nicht bewegt. Da sich das Gummiband jetzt von der Endposition zur Box erstreckt, rastet es nach dem Loslassen der Box wieder in die Endposition ein.

Positionen berechnen

Zuerst Ermitteln Sie vor dem Animieren die Position (links und rechts) und Größe (Breite und Höhe) des ersten gemeinsam genutzten Knotens mithilfe der Methode getBoundingClientRect ()

Zuerst Ermitteln Sie vor dem Animieren die Position (links und rechts) und Größe (Breite und Höhe) des ersten gemeinsam genutzten Knotens mithilfe der Methode getBoundingClientRect ()

Nachdem wir das FLIP-Prinzip skizziert haben, setzen wir es in die Praxis um. Angenommen, Sie haben eine scrollbare Bildergalerie. Wenn auf eines dieser Bilder geklickt wird, wird es nahtlos verschoben und von seiner ursprünglichen Rasterposition zu seiner endgültigen Position in voller Breite erweitert. Das CSS für die Rastergalerie basiert auf Flexbox:



.gallery { display: flex; flex-flow: row wrap justify-content: space-around; align-items: flex-start; } .detail { display: block; width: 100%; height: 100% } /* Image inside a gallery */ .gallery > .item { flex: 0 0 30%; height: auto; } .item > img { width: 100%; height: auto; } /* Detail view of image */ .detail > img { width: 100%; height: auto; }

last Ruft die Position und Größe des letzten freigegebenen Knotens mit derselben Methode ab, die Sie für den ersten verwendet haben. Dies wird invertiert, um wie der erste Knoten auszusehen

last Ruft die Position und Größe des letzten freigegebenen Knotens mit derselben Methode ab, die Sie für den ersten verwendet haben. Dies wird invertiert, um wie der erste Knoten auszusehen

Zur Berechnung der Positionen gibt es eine nützliche JavaScript-DOM-Knotenmethode namens .getBoundingClientRect (), die die Größe und Position des Knotens relativ zum Ansichtsfenster zurückgibt. Zum Glück wird auch die Bildlaufposition berücksichtigt und transformiert, sodass keine zusätzliche Mathematik erforderlich ist, um die tatsächliche Position zu berechnen.

// get the 7th image in the gallery, for example var imgNode = document.querySelectorAll('.item > img')[6]; imgNode.getBoundingClientRect(); // bottom: 865.375 // height: 86.0625 // left: 383.390625 // right: 498.140625 // top: 779.3125 // width: 114.75

invertieren Berechnen Sie das Delta (Änderung) in Position und Größe zwischen dem ersten und dem letzten gemeinsam genutzten Knoten, um den letzten Knoten zu transformieren und zu invertieren

invertieren Berechnen Sie das Delta (Änderung) in Position und Größe zwischen dem ersten und dem letzten gemeinsam genutzten Knoten, um den letzten Knoten zu transformieren und zu invertieren

Dadurch wird eine Objektinstanz von ClientRect zurückgegeben, die Folgendes enthält: die oberen, unteren, linken und rechten Positionen sowie die Höhe und Breite in Pixel.

Aufgrund der .getBoundingClientRect () -Methode ist das FLIP-Prinzip besonders nützlich, wenn Sie nicht genau wissen, wo ein Element im Dokument positioniert werden soll. Dieses Flexbox-Layout ist ein gutes Beispiel dafür, da ein Galerieelement in jeder Zeile positioniert werden kann.

Die Position kann sich auch ändern, basierend auf der Bildlaufposition der Galerie.

Aufgrund der Dynamik von Elementen, die durch verschiedene Layoutalgorithmen positioniert werden (z. B. relative Positionierung, Gleitkommazahlen, Inline-Layouts, Flexbox, die kommende Grid-Spezifikation usw.), sind CSS-Animationen nicht die am besten geeignete Wahl für den Übergang zweier ähnlicher, aber unterschiedlicher Elemente Elemente zwischen Ansichten.

Bevor sich die Ansichten ändern, speichern Sie mit .getBoundingClientRect () die Position des freigegebenen Elements an seiner ersten Position.

Verwenden Sie dann dieselbe Methode, um sofort die letzte Position des Elements zu berechnen, sobald sich die Ansicht ändert.

Ab diesem Punkt bleibt nur noch ein wenig Mathematik zu tun, um die Illusion zu erzeugen, dass das Element reibungslos von einer Ansicht zur nächsten übergeht.

play Animieren Sie den letzten Knoten von seiner Inversion zu seiner ursprünglichen Position und Größe mithilfe Ihrer bevorzugten JS-Animationsbibliothek oder der Webanimations-API

play Animieren Sie den letzten Knoten von seiner Inversion zu seiner ursprünglichen Position und Größe mithilfe Ihrer bevorzugten JS-Animationsbibliothek oder der Webanimations-API

Position umkehren

Sobald Sie die erste und letzte Position (und gegebenenfalls die Größe) der gemeinsam genutzten Elemente kennen, können Sie die Position des letzten gemeinsam genutzten Elements anhand der zurückgelegten Entfernung (oder des Deltas) zwischen den beiden Positionen umkehren. Denken Sie daran, wir werden die Illusion erzeugen, dass sich das letzte gemeinsam genutzte Element genau an derselben Position (und Größe) wie das erste gemeinsam genutzte Element befindet, und es dann wieder in seine endgültige Position zurückversetzen.

Angenommen, Sie haben mit .getBoundingClientRect () die folgenden ersten und letzten Positionen:

// first position, in grid { top: 100, left: 150, height: 50, width: 50, // ... etc. } // last position, fullscreen { top: 0, left: 0, height: 360, width: 360, // ... etc. }

Daraus können wir einige Dinge berechnen:

  • Die horizontale zurückgelegte Strecke ist die erste links minus die letzte links (150 - 0 = 150), daher muss sie 150 Pixel nach rechts zurücklegen
  • Die vertikale zurückgelegte Strecke ist die erste Spitze minus die letzte Spitze (100 - 0 = 0), daher muss sie 100 Pixel nach unten fahren
  • Das Delta der Breitenskala wird berechnet, indem die erste Breite durch die letzte Breite geteilt wird (50/360 = 0,138 ...).
  • In ähnlicher Weise wird das Höhenskalendelta berechnet, indem die erste Höhe durch die letzte Höhe geteilt wird, die gleich ist (50/360 = 0,138 ...).

in Aktion Ein Beispiel für einen animierten Übergang in einer mobilen App mithilfe der FLIP-Technik

wie man mehr Kunstaufträge bekommt
in Aktion Ein Beispiel für einen animierten Übergang in einer mobilen App mithilfe der FLIP-Technik

Die Position des endgültigen gemeinsam genutzten Elements kann durch Anpassen der Eigenschaften oben, links und Breite invertiert werden. Dies ist jedoch nicht so performant wie die Verwendung von Transformationen. Die invertierte Position kann in Transformationen ausgedrückt werden:

  • Horizontale Änderung: translateX (150px)
  • Vertikale Änderung: translateY (100px)
  • Horizontale Skala: scaleX (0,13888)
  • Vertikale Skala: scaleY (0,13888)

Wenden Sie Übersetzungen immer vor der Skalierung an, da die Skalierung vor der Übersetzung die Position des Elements beeinflusst und zu unerwarteten Ergebnissen führen kann. Die letzte invertierte Transformation lautet transform: translateX (150px) translateY (100px) scale (0.1388), da in diesem Fall scaleX und scaleY gleich sind.

Den Übergang spielen

Sobald die invertierte Transformation auf das letzte freigegebene Element angewendet wurde, sieht es so aus, als ob das erste freigegebene Element noch nicht verschoben wurde. In Wirklichkeit tritt das letzte gemeinsame Element nur vorübergehend an die Stelle des ersten und kann wieder an seine ursprüngliche Position animiert werden.

Jetzt müssen Sie nur noch den Übergang ausführen. Hier verwenden wir die Webanimations-API. Sie können jedoch auch Ihre bevorzugte JavaScript-Animationsbibliothek wie GSAP oder Velocity verwenden. Der Übergang geht von der invertierten Transformation zu keiner Transformation (d. H. Der ursprünglichen Position):

// First image node from gallery var imgNode = document.querySelectorAll('.item > img')[6]; // Last image node in fullscreen view var lastImgNode = document.querySelector('.fullscreen > img'); var firstImgRect = imgNode.getBoundingClientRect(); var lastImgRect = lastImgNode.getBoundingClientRect(); var deltaX = firstImgRect.left - lastImgRect.left; var deltaY = firstImgRect.top - lastImgRect.top; var deltaScale = firstImgRect.width / lastImgRect.width; // ... // Execute code that changes view // ... lastImgNode.animate([ { transform: ` translateX(${deltaX}px) translateY(${deltaY}px) scale(${deltaScale}) ` }, { transform: `translateX(0) translateY(0) scale(1)` } ], { duration: 300, easing: 'ease-in-out' });

FLIP in der Praxis

Zum Glück gibt es einige Tools und Ressourcen, mit denen Sie FLIP-Übergänge schnell zum Laufen bringen können. Paul Lewis von Google hat die Mnemonik FLIP in seinem wunderbaren Artikel 'FLIP your animations' ( netm.ag/lewis-285 ). Er hat auch flipjs erstellt, eine Hilfsbibliothek zum Erstellen von FLIP-Animationen mit der GreenSock Animation Platform oder requestAnimationFrame ( netm.ag/flipjs-285 ).

Wenn Sie React verwenden, ist die React Flip Move-Bibliothek von Josh Comeau möglicherweise hilfreich ( netm.ag/comeau-285 ). Auf diese Weise können Sie einfach verschachteln
Alle Elemente, die in einer Komponente FLIPPT werden sollen. Es ist außerdem hochgradig konfigurierbar, sodass Sie die Dauer, die Beschleunigung, die Staffelung oder einige der integrierten Animationen festlegen können.

Auch wenn es nicht speziell um FLIP geht, sind die Richtlinien von Google zum Materialdesign für Bewegungen ebenfalls unverzichtbar. Sie beschreiben, wie Bewegung einfach, zusammenhängend und sinnvoll sein sollte, und die meisten ihrer Beispiele können mithilfe von FLIP-Übergängen erzielt werden.

Nachdem Sie das FLIP-Prinzip verstanden haben, können Sie die hier behandelten Funktionen an Ihre eigenen Bedürfnisse anpassen. Spielen Sie mit der Dauer, den Timing-Funktionen, dem gleichzeitigen Übergang mehrerer Elemente mithilfe von FLIP und orchestrieren Sie sogar komplexere, kreativere Animationen.

Dieser Artikel wurde ursprünglich in veröffentlicht Netzmagazin Ausgabe 285. Kaufen Sie es hier.