Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native
Code

Animieren Sie Ihre React Native App

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Animation ist ein wichtiger Bestandteil des User Experience-Designs.  Es dient als Feedback zu Benutzeraktionen, informiert Benutzer über den Systemstatus und führt sie in die Interaktion mit der Benutzeroberfläche ein. 

React Native ist eines der Tools, die ich zum Erstellen plattformübergreifender mobiler Apps verwende.In diesem Tutorial gehe ich Ihnen durch, wie Sie Animationen in dieser Plattform implementieren.  Die endgültige Ausgabe für dieses Lernprogramm wird eine Kitchen Sink-App sein, die verschiedene Arten von Animationen implementiert.  So wird es aussehen: 

React Native Animations Kitchen Sink App

Ich gehe davon aus, dass Sie bereits die Grundlagen der Arbeit mit React Native kennen, sodass ich mich nicht zu sehr mit dem Code beschäftige, der nicht mit Animationen zu tun hat.  Weitere Hintergrundinformationen zu React Native finden Sie in einigen anderen Tutorials.

Wir werden speziell auf der Android-Plattform arbeiten, aber der in diesem Tutorial verwendete Code sollte auch auf iOS funktionieren.  Wenn Sie sich nicht mit den Schmerzen bei der Einrichtung eines neuen React Native-Projekts auseinandersetzen möchten, empfehle ich Ihnen, React Native Web Starter zu testen.  Auf diese Weise können Sie ein neues React Native-Projekt erstellen, das Sie im Browser als Vorschau anzeigen können.  Dies bringt den Vorteil mit sich, dass Sie kein Gerät einrichten müssen, und ein schnelleres Nachladen, um die Änderungen schneller anzuzeigen. 

Deine erste Animations-App

Wenn Sie dies noch nicht getan haben, erstellen Sie ein neues React Native-Projekt: 

Wenn Sie React Native Web Starter verwenden, erstellen Sie ein neues Projekt wie folgt: 

Öffnen Sie die Datei index.android.js (oder index.web.js), entfernen Sie den Standardcode und fügen Sie Folgendes hinzu: 

Wenn Sie React Native für Web verwenden, können Sie den obigen Schritt überspringen, da der Standardcode bereits für die Verwendung der App-Komponente eingerichtet ist.

Erstellen Sie einen App / components-Ordner und erstellen Sie eine App.js-Datei.  Dies ist die primäre Datei, mit der wir arbeiten werden.  Nachdem Sie die Datei erstellt haben, können Sie die Pakete importieren, die Sie für das gesamte Projekt benötigen. 

Wenn Sie zuvor schon einmal mit React Native gearbeitet haben, sollten Sie mit den folgenden Komponenten bereits vertraut sein.  Wenn nicht, werfen Sie einen Blick auf die React Native API-Dokumente.

Dies sind die Pakete, die speziell zum Implementieren von Animationen verwendet werden:

Hier ist eine kurze Übersicht von jedem: 

  • Animiert: ermöglicht das Erstellen von animierten Komponenten.  React Native hat eine klare Trennung zwischen animierten und statischen Komponenten.  Insbesondere können Sie animierte Ansichten (<Animated.View>), Text (<Animated.Text>) und Bilder (<Animated.Image>) erstellen. 
  • Beschleunigung: Ein allgemeiner Container mit konstanten Werten zum Vereinfachen von Animationen. 
  • LayoutAnimation: zum Ausführen verschiedener Arten von Animationen, wenn sich das Layout ändert (z. B. wenn der Status aktualisiert wird). 
  • UIManager: Derzeit ist LayoutAnimation noch eine experimentelle Funktion auf Android.  Durch den Import von UIManager können wir es aktivieren.  Für iOS funktioniert LayoutAnimation standardmäßig, sodass Sie den UIManager nicht importieren müssen. 

Animation drehen

Der erste Schritt beim Erstellen einer Animation besteht darin, einen animierten Wert zu definieren.  Dies geschieht üblicherweise im Komponentenkonstruktor. Im folgenden Code definieren wir einen neuen animierten Wert für den App-Komponenten-Konstruktor.  Beachten Sie, dass der Name dieses Werts beliebig sein kann, solange er die Animation beschreibt, die Sie erstellen möchten. 

In React Native können Sie einen neuen animierten Wert erstellen, indem Sie die Value () - Methode in der Animated-Klasse aufrufen.  Geben Sie dann den anfänglichen animierten Wert als Argument an. 

Als Nächstes erstellen Sie die Funktion, mit der die Drehanimation ausgeführt wird. 

In der ersten Zeile müssen wir den Anfangswert des animierten Werts festlegen, mit dem wir arbeiten möchten.  In diesem Fall setzen wir es auf 0. 

Als Nächstes erstellen wir eine neue Timing-Animation, indem wir die Funktion Animated.timing () aufrufen.  Dies akzeptiert den aktuellen animierten Wert als erstes Argument und ein Objekt, das die Animationskonfiguration als zweites enthält.  Das Objekt sollte den endgültigen Wert für den animierten Wert, die Dauer (in Millisekunden) und den Typ der Beschleunigungsanimation enthalten. 

Rufen Sie schließlich die start () -Methode auf, um die Animation zu starten.

Der letzte Schritt ist die Implementierung der Animation.  Definieren Sie in Ihrer render () - Methode, wie der Rotationswert geändert wird.  Dies kann durch Aufrufen der Funktion interpolate () erfolgen.  Es akzeptiert ein Objekt, das inputRange und outputRange enthält. inputRange ist ein Array, das den anfänglichen und den endgültigen Rotationswert enthält.  outputRange ist ein Array, das die tatsächlichen Rotationswerte enthält. 

Das Objekt, das animiert werden soll, befindet sich anfangs bei einer Drehung um 0 Grad, und der endgültige Wert wird 360 Grad betragen.  Diese Rotation wird im Verlauf von 1.500 Millisekunden durchgeführt, wie zuvor in der Animationskonfiguration definiert. 

Wenn Sie die Komponente rendern, wird der Rotationswert als Transformation in den Stilen hinzugefügt.  Wenn Sie mit CSS-Animationen vertraut sind, ist dies die entsprechende Implementierung in React Native. 

Nachdem Sie nun die Grundlagen zum Erstellen von Animationen kennen, erstellen wir einige weitere, damit Sie wissen, wie verschiedene Arten implementiert werden.  Erstellen Sie in Ihrem Konstruktor () ein Objekt mit den Animationen, die wir implementieren:

Machen Sie sich keine Sorgen, wenn Sie nicht wissen, was jeder tut - ich werde Sie durch alle führen.  Alles, was Sie jetzt wissen müssen, ist, dass diese Konfiguration angibt, ob eine Animation derzeit aktiviert ist oder nicht.  Fügen Sie nach dem Initialisieren das Animations-Array dem Status hinzu: 

Fügen Sie in Ihrer render () - Funktion die zu animierenden Komponenten sowie die Liste der Animationen hinzu. 

Die Funktion renderAnimationsList () rendert die Liste der Animationen mithilfe der Komponenten "Switch" und "Text". 

Mit dem Schalter können Sie die Animationen ein- und ausschalten.  Jedes Mal, wenn der Benutzer den Schalter drückt, wird die toggleAnimation () - Funktion ausgeführt.  Sie müssen nur die betreffende Animation finden und den Wert der aktivierten Eigenschaft auf den ausgewählten Wert aktualisieren.  Anschließend wird der Status mit den aktualisierten Werten aktualisiert und alle Animationen durchlaufen, wobei nur die aktivierten ausgeführt werden.

Fügen Sie auch die Stile hinzu, die in der App verwendet werden.

Animation skalieren 

Bei der Skalierungsanimation erstellen Sie ein Objekt, das größer oder kleiner als die ursprüngliche Größe ist.  Erstellen Sie zunächst einen neuen animierten Wert im Konstruktor: 

Erstellen Sie die Funktion zum Animieren der Skala.  Dies sieht ähnlich aus wie die Funktion spin (); Der einzige Unterschied ist die von uns verwendete Beschleunigungsfunktion.  Hier verwenden wir easeOutBack, um die Skalierung flüssiger zu gestalten.  Dies ist besonders nützlich, wenn diese Animation wiederholt ausgeführt wird.  Wenn Sie wissen möchten, welche anderen Beschleunigungsfunktionen Sie verwenden können, besuchen Sie easings.net.  Alle dort aufgeführten Beschleunigungen können in React Native verwendet werden. 

Das Neue an der obigen Funktion ist, dass wir eine Funktion als Argument an die start () - Funktion übergeben.  Diese Funktion wird ausgeführt, wenn die Animation abgeschlossen ist.  Hier überprüfen wir, ob die Animation aktiviert ist, und wenn ja, rufen wir dieselbe Funktion erneut auf.  Dadurch können wir die Animation wiederholt ausführen, solange sie aktiviert ist.

Konfigurieren Sie dann in Ihrer render () - Funktion die Skalierungsinterpolation.  Diesmal haben wir drei Werte für den Eingangs- und Ausgangsbereich, um einen pulsierenden Effekt wie einen Herzschlag zu erzeugen.  Dies ermöglicht uns die Erstellung einer Skalenanimation, die ein Objekt nicht abrupt vergrößert oder verkleinert.  Der höchste Ausgabebereich ist 7, das Objekt ist also sieben Mal größer als seine ursprüngliche Größe. 

Um Speicherplatz zu sparen, fügen Sie einfach die Skalentransformation zu derselben Komponente hinzu, die wir zuvor verwendet haben: 

Nachdem diese beiden Transformationen hinzugefügt wurden, können Sie jetzt sowohl die Spin- als auch die Skalenanimation aktivieren, um sie gleichzeitig auszuführen. 

Inzwischen sollten Sie die Muster bemerkt haben, mit denen Sie Animationen erstellen können.  Bei Animationen wird viel Code wiederholt.  Es empfiehlt sich, Funktionen zu erstellen, die wiederholten Code enthalten. Um die Dinge jedoch einfach und leicht verständlich zu machen, bleiben wir bei den restlichen Animationen beim Rohcode.

Deckkraft-Animation

Versuchen wir nun, die Deckkraft einer Komponente zu animieren.  Inzwischen sollten Sie ziemlich genau wissen, wo die einzelnen Codes liegen. Ich werde jetzt nicht mehr erwähnen, wo Sie die einzelnen Codes platzieren werden.  Falls Sie jedoch verwirrt sind, können Sie einfach den Code auf GitHub betrachten:

Erstellen Sie eine Funktion zum Ändern der Deckkraft.  Beim Ändern der Deckkraft ist eine lineare Beschleunigungsfunktion am besten geeignet, da sie am einfachsten ist. 

Ändern Sie die Deckkraft von sichtbar in transparent und dann innerhalb von drei Sekunden wieder. 

Erstellen Sie eine neue Komponente, deren Deckkraft gesteuert wird: 

Farbwert

Als Nächstes versuchen wir, die Hintergrundfarbe einer Komponente zu animieren: 

Diesmal animieren wir uns im Verlauf von fünf Sekunden: 

Wir haben drei Farben, mit denen wir arbeiten können.  Die ursprüngliche Farbe ist gelb und nach einigen Sekunden wird sie vollständig orange und dann rot.  Beachten Sie, dass sich die Farben nicht abrupt ändern. Alle Farben zwischen den von Ihnen angegebenen Farben werden ebenfalls angezeigt.  React Native berechnet automatisch die Farbwerte zwischen den angegebenen Werten.  Sie können die Dauer verlängern, wenn Sie sehen möchten, wie sich die Farbe im Laufe der Zeit ändert. 

Genau wie die Deckkraft wird der interpolierte Wert als Stil hinzugefügt: 

Parallele Animationen 

Man kann sagen, dass wir bereits Animationen parallel ausgeführt haben.  Dies ist jedoch nur ein Nebeneffekt, wenn verschiedene Transformationen an eine einzelne Komponente angehängt werden.  Wenn Sie mehrere Animationen gleichzeitig ausführen möchten, müssen Sie die Funktion parallel () der Animated API verwenden.  Dies akzeptiert eine Reihe von Animationsfunktionen zur Ausführung.  Im folgenden Beispiel haben wir zwei animierte Werte, einen für jede Komponente, die wir animieren möchten.

In der Animationsfunktion setzen wir wie gewohnt die anfänglichen animierten Werte.  Aber darunter verwenden wir Animated.parallel (), um alle Animationen zu gruppieren, die wir ausführen möchten.  In diesem Fall haben wir nur zwei Timing-Animationen, die zwei Sekunden lang ausgeführt werden.  Beachten Sie auch, dass wir die start () -Methode nicht für jede Animation aufrufen.  Stattdessen verwenden wir es, nachdem wir die parallele Animation deklariert haben.  Dadurch können wir die Animationen gleichzeitig starten. 

Um die Interpolation sinnvoll zu machen, aktivieren Sie zunächst den Stil, den wir zuvor für die beiden Kästchen hinzugefügt haben: 

Das blaue Kästchen wird mit Flex-Start ausgerichtet, dh es ist nach links ausgerichtet.  Die grüne Box ist ein Flex-Ende, das nach rechts ausgerichtet ist.  (Zumindest funktionieren sie so, wenn der Container eine flexDirection-Spalte hat.  Ansonsten ist es eine andere Geschichte.)

Mit diesem Wissen können wir die Boxen jetzt beliebig verschieben.  Für dieses Tutorial wollen wir jedoch nur die Boxen in die entgegengesetzte Position bringen.  Das blaue Feld bewegt sich also nach rechts und das grüne Feld nach links.  Hier kommen die Gerätemaßdaten an.  Wir verwenden die Breite des Geräts, um den endgültigen Interpolationswert zu berechnen, damit die Box nicht außerhalb der Grenzen liegt. 

In diesem Fall subtrahieren wir einfach 50 von der Breite des Geräts, damit der blaue Kasten nach rechts geht.  Und für das grüne Feld konvertieren wir die Breite des Geräts in das negative Äquivalent, sodass es nach links verschoben wird.  Sie fragen sich vielleicht, warum 50?  Dies ist darauf zurückzuführen, dass die Größe jedes Felds 50 beträgt.  Das Feld wird immer noch überschritten, wenn die eigene Größe nicht von der Breite des Geräts abgezogen wird. 

Fügen Sie schließlich die zu animierenden Komponenten hinzu.  Die fragliche Transformation ist translateX, wodurch wir die Position eines Objekts in der X-Achse ändern können, um es horizontal zu verschieben. 

Neben den parallelen Animationen gibt es auch die Sequenz- und Staffelanimationen.

Die Implementierung dieser Programme ähnelt parallelen Animationen in dem Sinne, dass sie alle ein Array von Animationen akzeptieren, die ausgeführt werden sollen.  Der entscheidende Faktor für Sequenzanimationen ist jedoch, dass die im Array bereitgestellten Animationen der Reihe nach ausgeführt werden.  Sie können jeder Animation optional auch Verzögerungen hinzufügen, wenn Sie möchten. 

Auf der anderen Seite ist eine gestaffelte Animation eine Kombination aus Parallel- und Sequenzanimationen.  Dies liegt daran, dass Sie Animationen gleichzeitig und nacheinander ausführen können.  Hier ist ein Stift, der Staffelanimationen zeigt. 

Layout-Animation

Ein weiteres Werkzeug, das React Native für die Implementierung von Animationen bereitstellt, ist LayoutAnimation.  Auf diese Weise können Sie Ansichten beim nächsten Layout in ihre neuen Positionen animieren.  Layoutänderungen treten normalerweise auf, wenn Sie den Status aktualisieren.  Dies hat zur Folge, dass eine bestimmte UI-Komponente entweder hinzugefügt, aktualisiert oder vom Bildschirm entfernt wird. 

Wenn diese Ereignisse eintreten, sorgt LayoutAnimation für die Animation der betreffenden Komponente.  Wenn Sie beispielsweise in einer Aufgabenlisten-App ein neues Aufgabenelement hinzufügen, wird automatisch eine Federanimation hinzugefügt, um das neue Element zu erstellen. 

Fügen wir eine LayoutAnimation in die Kitchen Sink-App ein.  Wie bereits erwähnt, müssen Sie LayoutAnimation, Platform und UIManager in die App importieren.  Fügen Sie dann in Ihrem Konstruktor () den Code zum Aktivieren von LayoutAnimation auf Android hinzu: 

(Unter iOS sollte LayoutAnimation standardmäßig funktionieren.  Wenn Sie React Native for Web verwenden, wird LayoutAnimation nicht unterstützt. Daher müssen Sie die App entweder auf Android oder iOS exportieren und von dort aus testen.) 

Fügen Sie direkt unterhalb der ScrollView, die die Animationsliste enthält, eine Schaltfläche zum Erzeugen von Quadraten hinzu, die auf dem Bildschirm angezeigt werden: 

Im Grunde wird dadurch jedes Mal drei kleine Quadrate erzeugt, wenn der Benutzer auf die Schaltfläche "Add Squares" tippt.

Hier ist die Funktion zum Hinzufügen von Quadraten: 

Die Idee ist, die LayoutAnimation.configureNext () aufzurufen, bevor Sie den Status aktualisieren.  Dies akzeptiert die Animation, die Sie verwenden möchten.  Im Lieferumfang von LayoutAnimation sind drei Voreinstellungen enthalten: linear, Frühling und easeInEaseOut.  Diese sollten in den meisten Fällen funktionieren. Wenn Sie jedoch die Animationen anpassen müssen, lesen Sie die Dokumentation zu LayoutAnimation, um zu erfahren, wie Sie eigene Animationen erstellen können. 

Erstellen Sie in der Funktion render () eine for-Schleife, die die Quadrate rendert.  Die Anzahl der zu erzeugenden Quadrate hängt von dem aktuellen Wert der Quadrate in diesem Zustand ab. 

Die renderSquare () - Funktion rendert tatsächlich die Quadrate: 

Drittanbieter-Bibliotheken

Die animierte API von React Native ist sehr robust und anpassbar, aber wie Sie bisher gesehen haben, bringt dies den Nachteil mit sich, dass Sie sehr viel Code schreiben müssen, um sehr einfache Animationen zu implementieren.  In diesem letzten Abschnitt stelle ich Ihnen zwei Bibliotheken von Drittanbietern vor, mit denen Sie gängige Animationen mit weniger Code implementieren können. 

Zahlen animieren

Wenn Sie eine App erstellen, die Zahlen animieren muss (z. B. eine Stoppuhr- oder Zähler-App), können Sie die integrierte Funktion setInterval () verwenden, um den Status in einem festgelegten Intervall zu aktualisieren und die Animationen anschließend selbst zu implementieren. 

Wenn Sie möchten, können Sie auch die Animate Number-Bibliothek verwenden.  Auf diese Weise können Sie auf einfache Weise Zahlenanimationen implementieren, z. B. den Übergang bei jeder Aktualisierung der Anzahl anpassen.  Sie können es mit dem folgenden Befehl installieren: 

Nach der Installation importieren Sie es in Ihre App: 

Dann verwenden Sie es als Komponente: 

Was der obige Code tut, zählt von 0 bis zu 100. 

Allzweck-Animationen

Wenn Sie allgemeine Animationen wie die der Bibliothek animate.css implementieren möchten, gibt es eine entsprechende Bibliothek für React Native mit dem Namen Animatable.  Sie können es mit dem folgenden Befehl installieren: 

Nach der Installation importieren Sie es mit dem folgenden Code: 

Hier ist ein Beispiel mit dem Code, den wir zuvor für unsere Layoutanimation hinzugefügt haben.  Sie müssen lediglich <Animatable.View> anstelle von  <Animatable.View> verwenden und dann einen Ref hinzufügen, damit wir diese Komponente mithilfe von JavaScript-Code referenzieren können. 

Als Nächstes erstellen Sie eine resetSquares () -Methode.  Dadurch werden alle Quadrate entfernt, die aktuell auf dem Bildschirm angezeigt werden.  Verwenden Sie this.refs.squares, um auf den Quadrate-Container zu verweisen, und rufen Sie dann die Funktion zoomOutUp () auf, um sie mithilfe einer Zoom-Animation mit der Aufwärtsrichtung außerhalb des Sichtbereichs zu animieren.  Vergessen Sie nicht, den Status nach Abschluss der Animation zu aktualisieren.  Dies ist ein übliches Muster beim Implementieren von Animationen.  Machen Sie die Animation, bevor Sie den Status aktualisieren.

Dasselbe gilt für die addSquares () -Methode.  Diesmal animieren wir jedoch den Quadrate-Container wieder.  Statt die Animation zuerst auszuführen, führen wir sie direkt nach der Aktualisierung des Status aus.  Dies liegt daran, dass der Quadrate-Container nur dann angezeigt wird, wenn er ein Kind hat.  Wir brechen hier also die Regel, dass die Animation zuerst ausgeführt werden sollte. 

Fazit 

Das ist es!  In diesem Artikel haben Sie die Grundlagen zum Erstellen von Animationen in React Native kennen gelernt.  Animationen können mithilfe der Animated API, LayoutAnimations und Bibliotheken von Drittanbietern implementiert werden. 

Wie Sie gesehen haben, kann das Erstellen von Animationen selbst für einfache Animationen, z. B. eine Skalierungsanimation, sehr viel Code erfordern.  Dies hat den Vorteil, dass Sie die Animationen beliebig anpassen können. 

Wenn Sie jedoch nicht mit zu viel Code umgehen möchten, können Sie immer React Native-Bibliotheken von Drittanbietern verwenden, die speziell für die einfache Implementierung von Animationen erstellt wurden.  Den vollständigen in diesem Tutorial verwendeten Quellcode finden Sie auf GitHub

Lesen Sie weiter

  • Reagieren Sie native Animationen mithilfe der animierten API: Ein Anfänger-freundlicher Leitfaden zum Implementieren verschiedener Arten von Animationen in React Native.  Dieses Tutorial behandelt Sequenz- und Staffelanimationen, wenn Sie mehr darüber erfahren möchten. 
  • React Native Animation Book: noch in Arbeit, aber dennoch eine wertvolle Ressource.  Es gibt fast alles, was Sie über Animationen in React Native wissen möchten - zum Beispiel, wenn Sie beim Scrollen des Benutzers etwas animieren oder Objekte verschieben möchten. 
  • React Native Docs - Animationen: Wenn Sie wissen möchten, wie Sie Animationen in React Native implementieren können. 
  • Animation im Mobile UX-Design: Nicht direkt mit React Native, sondern allgemein mit der Animation von mobilen Apps verbunden.  Dies ist eine gute Lektüre sowohl für UX-Designer als auch für Entwickler, um eine allgemeine Vorstellung darüber zu haben, wie den Benutzern sinnvolle Animationen angezeigt werden. 

Wenn Sie mehr über die CSS-Animation erfahren möchten, sehen Sie sich einige unserer Videokurse an. 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.