Erste Schritte mit Animationen in React Native

Animationen können einer App Leben einhauchen und sie ansprechender und intuitiver für den Benutzer machen. Aber wenn Sie mit React Native-Animationen noch nicht vertraut sind, kann der Einstieg etwas entmutigend sein.

Erkunden Sie React Native-Animationen und finden Sie heraus, wie Sie mit der Erstellung schöner, flüssiger Animationen beginnen können.

Wie funktionieren grundlegende React-Native-Animationen?

Animationen können fließende Übergänge zwischen verschiedenen Bildschirmen oder Elementen erzeugen. Sie können Informationen hervorheben oder Feedback zu Benutzeraktionen geben. Animationen können einfach oder komplex sein und eine Vielzahl von Techniken verwenden, wie z. B. 2D- oder 3D-Grafikanimationen.

Aufgrund der Portabilität von React Native lohnt es sich, es zu verwenden wenn Sie auf mehrere Plattformen abzielen. Eine der stärksten Funktionen ist die Möglichkeit, schöne Animationen für mobile Apps zu erstellen.

Sie können ein React Native-Objekt animieren, indem Sie einfach den Positionsstatus der gewünschten Komponente ändern.

Zum Beispiel:

importieren Reagieren, { useState, useEffect } aus'reagieren';
importieren { Ansicht, Stylesheet } aus'reaktionsnativ';
konst Anwendung = () => {
// Status initialisieren, um die Boxposition zu verfolgen
konst [BoxPosition, setBoxPosition] = useState(0);
// Verwenden Sie den useEffect-Hook, um die Box-Position alle 1 Sekunde zu aktualisieren
 useEffect(() => {
konst Intervall = setInterval(() => {
// Aktualisieren Sie die Box-Position, indem Sie 10 zur aktuellen Position hinzufügen
 setBoxPosition(vorherigePosition => vorherigePosition + 10);
 }, 1000);
// Eine Bereinigungsfunktion zurückgeben, um das Intervall zu löschen, wenn die Komponente
// unmountet
zurückkehren() => clearInterval (Intervall);
 }, []);
// Legen Sie die Boxposition mit der Zustandsvariablen im Inline-Stil fest
konst boxStyle = {
 transformieren: [{ übersetzenY: boxPosition }]
 };
zurückkehren (


 </View>
 );
};
konst Stile = StyleSheet.create({
 Behälter: {
 biegen: 1,
 ausrichtenItems: 'Center',
 begründenInhalt: 'Center',
 },
 Kasten: {
 Breite: 100,
 Höhe: 100,
 Hintergrundfarbe: 'Blau',
 },
});
ExportStandard Anwendung;

Dieser Code rendert ein blaues Kästchen, das sich jede Sekunde nach unten bewegt. Die Animation funktioniert mit der useEffect Haken, um einen Timer zu erstellen, der die aktualisiert BoxPosition Zustandsvariable alle 1 Sekunde.

Obwohl dies in einigen Situationen funktionieren kann, ist dies nicht die beste Option. Zustandsaktualisierungen in React Native funktionieren asynchron, aber Animationen sind auf synchrone Zustandsaktualisierungen angewiesen, um korrekt zu funktionieren. Die asynchrone Implementierung Ihrer Animation führt dazu, dass Zustandsaktualisierungen nicht sofort in der gerenderten Ausgabe der Komponente widergespiegelt werden, wodurch das Timing Ihrer Animationen durcheinander gebracht wird.

Sie sind mehrere Animationsbibliotheken wie die Animiert Bibliothek, reagieren-nativ-reanimiert, Und reagieren-nativ-animierbar zum Erstellen performanter Animationen in React Native. Jede dieser Animationsbibliotheken beseitigt das Problem asynchroner Zustandsaktualisierungen und ist perfekt geeignet.

Die React Native Animated API

Animated ist eine API, die React Native bereitstellt. Sie können es verwenden, um reibungslose Animationen zu erstellen, die auf Benutzerinteraktionen oder Zustandsänderungen reagieren.

Mit der animierten API können Sie animierte Werte erstellen, die Sie interpolieren und verschiedenen Stileigenschaften Ihrer Komponenten zuordnen können. Sie können diese Werte dann mit verschiedenen Animationsmethoden im Laufe der Zeit aktualisieren. Die Stile Ihrer Komponenten werden dann aktualisiert, wenn sich die animierten Werte ändern, was zu reibungslosen Animationen führt.

Animated funktioniert sehr gut mit dem Layoutsystem von React Native. Aus diesem Grund werden Ihre Animationen für ein noch besseres Aussehen richtig in den Rest Ihrer Benutzeroberfläche integriert.

Um mit der Verwendung von Animated in Ihrem React Native-Projekt zu beginnen, müssen Sie die Animiert Modul aus ‘reagieren-native’ in deinen Code:

importieren {Animiert} aus'reaktionsnativ';

Wenn Animated importiert ist, können Sie mit der Erstellung von Animationen beginnen. Erstellen Sie dazu zunächst einen animierten Wert, den Sie während der gesamten Animation manipulieren:

konst animierter Wert = neu Animiert. Wert(0);

Der Animiert. Wert ist eine Klasse in der React Native Animated API, die einen veränderlichen Wert darstellt. Sie können es mit einem Anfangswert initialisieren und es dann im Laufe der Zeit mit verschiedenen Animationsmethoden aktualisieren, die von der animierten API bereitgestellt werden, z.zeitliche Koordinierung(), .Frühling(), Und .Verfall(), indem Sie die Dauer der Animation, die Beschleunigungsfunktion und andere Parameter angeben.

Der animierte Wert ähnelt einem Statuswert in einer React-Komponente.

Sie können eine initialisieren Animiert. Wert mit dem anfänglichen Zustandswert einer Komponente und aktualisieren Sie ihn dann im Laufe der Zeit mit der setState Methode.

Sie haben beispielsweise eine Komponente mit einem Zustandswert zählen, die angibt, wie oft der Benutzer auf diese Schaltfläche geklickt hat.

Sie können eine erstellen Animiert. Wert und initialisieren Sie es mit dem Anfangszustandswert von zählen:

konst Anwendung = () => {
konst [count, setCount] = useState(0);
konst animierter Wert = neu Animiert. Wert (Anzahl);
};

Dann, wann immer die zählen Statuswertaktualisierungen können Sie aktualisieren animierterWert zu:

konst handlebuttonClick = () => {
 setCounter (Zähler + 1);
 Animated.timing (animatedValue, {
 toValue: zählen + 1,
 Dauer: 500,
 useNativeDriver: WAHR
 }).Start();
};

Dieses Beispiel wird aktualisiert animierterWert Verwendung der Animated.timing() -Methode, wenn ein Benutzer auf die Schaltfläche klickt. Der animierterWert steuert die Animation und ändert den Wert über 500 Millisekunden.

Indem man sich bezieht Animiert. Wert auf einen Zustandswert auf diese Weise können Sie Animationen erstellen, die auf Änderungen im Zustand Ihrer Komponente reagieren.

Nachdem Sie nun verstanden haben, wie ein animierter Wert manipuliert wird, können Sie mit dem Interpolieren des animierten Werts fortfahren und ihn mithilfe von einer Stileigenschaft Ihrer Komponente zuordnen Animiert.interpolieren() Methode.

Zum Beispiel:

konst Opazität = animierterWert.interpolate({
 Eingabebereich: [0, 1],
 Ausgabebereich: [0, 1]
});
zurückkehren (

 {/* Ihr Komponenteninhalt */}
 </View>
);

Dadurch wird eine Animation erstellt, die allmählich eingeblendet wird Sicht Komponente, wenn sich der animierte Wert von 0 auf 1 ändert.

Animationstypen verstehen

Das Verständnis der Animationstypen und ihrer Funktionsweise ist wichtig, um gute Animationen zu erstellen.

Verwendung der Verwenden Sie NativeDriver Option mit Animiert verbessert die Leistung. Mit dieser Option können Sie Animationen an den nativen UI-Thread auslagern. Es kann die Leistung erheblich verbessern, indem der Umfang der erforderlichen JavaScript-Verarbeitung reduziert wird.

Allerdings unterstützen nicht alle Animationstypen den nativen Treiber. Der Versuch, den nativen Treiber mit Animationen zu verwenden, die Farb- oder Layoutänderungen beinhalten, kann zu unerwartetem Verhalten führen.

Darüber hinaus können Animationen mit komplexen Sequenzen erhebliche Leistungsprobleme auf Geräten mit begrenzter Rechenleistung oder begrenztem Speicher verursachen. Diese Leistungsdefizite können auch bemerkenswert sein, wenn Ihr React Native-Projekt eine niedrigere Version ausführt, die dies nicht tut Unterstützung der Hermes-Engine.

Das Verständnis der Stärken und Einschränkungen verschiedener Animationstypen kann Ihnen bei der Auswahl des richtigen Ansatzes für Ihren Anwendungsfall helfen.

Machen Sie sich mit React Native Animationen vertraut

Animationen sind ein leistungsstarkes Werkzeug zum Erstellen ansprechender und dynamischer Benutzeroberflächen in React Native-Apps. Die animierte API bietet eine flexible und leistungsstarke Möglichkeit, sowohl einfache als auch komplexe Sequenzanimationen zu erstellen.

Dennoch ist es wichtig, die Auswirkungen von Animationen auf die Leistung zu berücksichtigen und den geeigneten Ansatz und die geeignete Bibliothek für Ihre Situation auszuwählen.