So erstellen Sie besser reagierende native Animationen

Mobile Apps verwenden oft Animationen, um die Benutzererfahrung zu beleben. Das Erstellen hochwertiger Animationen kann jedoch eine Herausforderung sein.

Glücklicherweise gibt es Konzepte und Techniken, mit denen Sie Ihre Animationsfähigkeiten verbessern können. Sie können sie dann anwenden, um bessere, flüssigere Animationen für Ihre nächste mobile Anwendung von React Native zu erstellen.

Reagieren Sie auf native Animationen

Der Reagieren Sie nativ animiert Bibliothek ist die beliebteste Methode, um Animationen in einer React Native-App zu erstellen.

So wie Die integrierte Animationsbibliothek von React, die Animated-API ist Teil der JavaScript-basierten Animated-Bibliothek. Animated bietet eine Reihe von Klassen und Methoden, mit denen Sie reibungslose und flüssige Animationen erstellen können. Es gibt mehrere andere großartige Optionen zum Erstellen von React Native-Animationen, z. B. Reanimated.

Beim Erstellen guter Animationen in React Native geht es jedoch nicht nur darum, die richtige Bibliothek zu verwenden oder die richtigen Eigenschaften festzulegen. Es geht auch darum, die Prinzipien der Animation zu verstehen und sie im Kontext der Entwicklung mobiler Apps anzuwenden. Hier sind also ein paar Schlüsselprinzipien, die Sie verstehen und beachten sollten, wenn Sie Ihre Animationen erstellen.

Anpassen der Animationsdauer

Animationen sollten sich für einen Benutzer glatt und natürlich anfühlen. Ob Sie dies erreichen, hängt davon ab, wie Sie mit der Dauer bestimmter von Ihnen erstellter Animationen umgehen.

Die Dauer bezieht sich auf die Zeit, die eine Animation benötigt, um vollständig ausgeführt zu werden. Standardmäßig haben Animationen in React Native eine Dauer von 500 Millisekunden, aber Sie können sie so anpassen, dass sie schneller oder langsamer ablaufen.

Sie sollten die Dauer der Animation entsprechend ihrer Komplexität anpassen. Eine einfache Animation, wie z. B. eine Einblendung, benötigt möglicherweise nur eine kurze Dauer, während eine komplexere Animation, wie z. B. eine Einblendung mit Bounce-Effekt, möglicherweise länger dauern muss, um sich natürlich und glatt anzufühlen.

Mit dem Animation.timing() -Methode können Sie eine benutzerdefinierte zeitgesteuerte Animation erstellen, die Ihren Anforderungen entspricht.

Hier ist ein Beispiel dafür, wie Sie einer einfachen Einblendungsanimation eine benutzerdefinierte Dauer hinzufügen:

importieren Reagieren, { useRef } aus'reagieren';
importieren { Animiert, Ansicht } aus'reaktionsnativ';
konst FadeInView = (Requisiten) => {
konst fadeAnim = useRef(neu Animiert. Wert(0)).aktuell; 
 Reagieren.useEffect(() => {
 Animiertes.timing(
 FadeAnim,
 {
 schätzen: 1,
 Dauer: 2000, // Benutzerdefinierte Dauer festlegen
 useNativeDriver: WAHR,
 }
 ).Start();
 }, [fadeAnim]);
zurückkehren (
 Stil={{
 ...requisiten.stil,
 Deckkraft: fadeAnim,
 }}
 >
 {requisiten.kinder}
 </Animated.View>
 );
}
ExportStandardFunktionApp() {
zurückkehren (
biegen: 1, ausrichtenItems: 'Center', Inhalt begründen: 'Center'}}>
Breite: 250, Höhe: 50, Hintergrundfarbe: 'puderblau'}}>
Schriftgröße: 28, Textausrichtung: 'Center', Rand: 10}}> Verblassen In</Text>
 </FadeInView>
 </View>
 );
}

Bei der Auswahl einer Dauer für Ihre Animation ist es wichtig, das richtige Gleichgewicht zwischen Geschwindigkeit und Laufruhe zu finden.

Versuchen Sie, mit einer längeren Dauer zu beginnen, wenn Sie zum ersten Mal experimentieren. Eine längere Dauer gibt Ihnen mehr Zeit, die Beschleunigungsfunktion anzupassen und Ihre Animation zu verfeinern. Sie können die Dauer später jederzeit verkürzen, wenn Sie mit dem Gesamteffekt zufrieden sind.

Verwenden Sie Easing-Funktionen

Einfache Animationen können eine konstante Geschwindigkeit haben, aber das Variieren der Geschwindigkeit kann natürlichere Effekte erzeugen. Beschleunigungsfunktionen steuern die Änderungsrate einer Animation im Laufe der Zeit. Sie können Ihre Animationen langsam starten und dann beschleunigen lassen. Durch das Festlegen unterschiedlicher Geschwindigkeiten im Verlauf der Animation kann eine reibungslose und ansprechende Animation erstellt werden.

Nehmen Sie dieses Beispiel für die Verwendung einer Beschleunigungsfunktion:

importieren Reagieren, { useRef } aus'reagieren';
importieren { Animiert, Ansicht } aus'reaktionsnativ';
konst FadeInView = (Requisiten) => {
konst fadeAnim = useRef(neu Animiert. Wert(0)).aktuell; 
 Reagieren.useEffect(() => {
 Animiertes.timing(
 FadeAnim,
 {
 schätzen: 1,
 Dauer: 2000,
 Lockerung: Animated.easeOut, // hier Beschleunigungsfunktion verwenden
 useNativeDriver: WAHR,
 }
 ).Start();
 }, [fadeAnim]);
zurückkehren (
 Stil={{
 ...requisiten.stil,
 Deckkraft: fadeAnim,
 }}
 >
 {requisiten.kinder}
 </Animated.View>
 );
}
ExportStandardFunktionApp() {
zurückkehren (
biegen: 1, ausrichtenItems: 'Center', Inhalt begründen: 'Center'}}>
Breite: 250, Höhe: 50, Hintergrundfarbe: 'puderblau'}}>
Schriftgröße: 28, Textausrichtung: 'Center', Rand: 10}}>Einblenden</Text>
 </FadeInView>
 </View>
 );
}

Dieser Code verwendet die Animated.easeOut Funktion zum Steuern der Änderungsrate der Deckkraft einer Animation Sicht. Der Animated.timing() -Methode verwendet die Ease-out-Funktion, um die Deckkraft über einen Zeitraum von zwei Sekunden allmählich von 0 auf 1 zu ändern, damit die Animation scheinbar langsamer wird, wenn sie ihr Ende erreicht.

Sie können verschiedene Arten von Easing-Funktionen verwenden, um Ihre Animationen glatter aussehen zu lassen, einschließlich Ease-in, Ease-out und Ease-in-out.

Die Auswahl der richtigen Beschleunigungsfunktion kann einen großen Unterschied in der wahrgenommenen Qualität der Animationen Ihrer Anwendung ausmachen. Es lohnt sich, sich etwas Zeit zu nehmen, um mit ihnen herumzuspielen und zu sehen, was für Ihre spezifischen Anwendungsfälle am besten funktioniert.

Keyframes helfen bei komplexen Animationen

Keyframes sind Markierungen, mit denen Sie Momente in Ihrer Animation lokalisieren können, an denen Sie Änderungen an Eigenschaften wie Position, Skalierung oder Drehung vornehmen möchten. Es ist wie das Markieren von Zeitpunkten, um die Animation zu leiten.

Sie können eine Reihe von verwenden Keyframes, um bestimmte Werte für jede Eigenschaft festzulegen Sie möchten animieren. Dies hilft Ihnen, Timing und Verhalten zu steuern, insbesondere bei komplexen Animationen wie solchen, die Charakterbewegungen beinhalten.

Um eine grundlegende Keyframe-Animation zu erstellen, müssen Sie die Keyframes angeben, zwischen denen Sie animieren möchten, sowie die Gesamtdauer.

Angenommen, Sie möchten ein Quadrat von einer Startposition (0, 0) zu einer Endposition (100, 100) über einen Zeitraum von einer Sekunde animieren.

Sie können ein Array von Keyframes wie folgt erstellen:

konst Keyframes = [
 { X: 0, j: 0 },
 { X: 50, j: 50 },
 { X: 100, j: 100 },
];

In diesem Fall gibt es drei Keyframes: einen am Anfang der Animation, einen in der Mitte und einen am Ende. Sie können dieses Array von Keyframes dann zusammen mit einer Dauer von 1.000 Millisekunden an Ihre Animationsbibliothek übergeben, um eine reibungslose Animation zwischen den Keyframes zu erstellen.

In einigen Bibliotheken müssen Sie auch eine Beschleunigungsfunktion angeben, um den Fortgang der Animation zu steuern. Sie können jedoch die Grundidee des Festlegens von Keyframes und der Dauer auf die meisten Animationsbibliotheken anwenden.

Profitieren Sie vom Gerät mit Hardwarebeschleunigung

Die Hardwarebeschleunigung kann ein leistungsstarkes Tool zur Optimierung der Leistung Ihrer React Native-Animationen sein. Indem Sie die Grafikhardware des Geräts nutzen, können Sie einen Teil der Verarbeitungsarbeit von der CPU entlasten und im Gegenzug flüssigere, reaktionsschnellere Animationen erzielen.

Die GPU des Geräts verarbeitet dann die animierten Werte und Stile nativ, anstatt dass der JavaScript-Thread dies tun muss.

Die Hardwarebeschleunigung ist möglicherweise nicht auf allen Geräten verfügbar, daher ist es wichtig, Ihre Animationen auf einer Vielzahl realer Geräte zu testen, um die beste Leistung sicherzustellen.