So verwenden Sie Lottie-Animationen in React Native-Projekten

Lottie ist eine von Airbnb entwickelte Open-Source-Animationsbibliothek für iOS, Android und React Native. Sie kann aus Adobe After Effects exportierte Animationen laden und nativen Apps ermöglichen, diese Animationen wie statische Materialien zu verwenden, wodurch coole Animationseffekte perfekt erzielt werden.
In Bezug auf den Nutzungsprozess muss Lottie Animation zunächst Adobe After Effects verwenden, um die Originalanimation zu erstellen, und dann das offizielle Bodymovin-Plug-In verwenden, um die Animation in eine JSON-Datei zu exportieren. Diese JSON-Datei ist die Animationsquelldatei, die Lottie analysieren muss.
Um Lottie-Animation in einem React Native-Projekt zu verwenden, müssen Sie zuerst die Plugins „lottie-react-native“ und „lottie-ios“ installieren, wie unten gezeigt.

Garn hinzufügen Lottie-React-Native
Garn hinzufügen [email protected]

Nachdem die Installation abgeschlossen ist, können Sie den Befehl „react-native link“ verwenden, um die Abhängigkeiten der nativen Bibliothek zu verknüpfen. Natürlich können wir darüber hinaus auch manuelle Methoden verwenden, um Abhängigkeiten hinzuzufügen. Für iOS-Projekte, die CocoaPods verwenden, müssen Sie die folgenden Skriptdateien hinzufügen.

pod 'lottie-ios', :Pfad => '../node_modules/lottie-ios'
pod 'lottie-react-native', :Pfad => '../node_modules/lottie-react-native'

Führen Sie dann den Befehl „Pod Install“ aus, um das Plug-In zu installieren. Für natives Android müssen Sie zuerst den folgenden Inhalt zur Datei android/settings.gradle hinzufügen.

einschließen ':lottie-react-native'
Projekt(':lottie-react-native').projectDir = neue Datei(rootProject.projectDir, '../node_modules/lottie-react-

Öffnen Sie als Nächstes die Datei app/build.gradle und fügen Sie die folgenden Abhängigkeiten hinzu.

 Abhängigkeiten {
  ...
  Implementierungsprojekt(':lottie-react-native')
  ...
}

Schließlich müssen Sie auch LottiePackage zur getPackages()-Methode von ReactApplication hinzufügen, wie unten gezeigt.

importiere com.airbnb.android.react.lottie.LottiePackage;
    
@Überschreiben
    geschützte Liste<ReactPackage> getPackages() {
      Arrays zurückgeben.<ReactPackage>asList(
          ... //Anderen Code weglassen new LottiePackage()
      );
    }
  };

An diesem Punkt wurde die von Lottie benötigte native Entwicklungsumgebung eingerichtet. Als Nächstes müssen Sie nur die von Lottie bereitgestellte LottieView-Komponente verwenden, um die zuvor exportierte JSON-Datei zu laden, wie unten gezeigt.

Funktion LottieAnimPage(){
    zurückkehren (
      <LottieView-Quelle = {require('../animations/LottieLogo1.json')} AutoPlay-Schleife />
    )
}

Standard-LottieAnimPage exportieren;

Gleichzeitig bietet die LottieView-Komponente auch einen Fortschrittsparameter, um der Animation einige zusätzliche Effekte hinzuzufügen. Nachfolgend sehen Sie beispielsweise einen Beispielcode, der mithilfe von Fortschritt einen ähnlichen Effekt erzielt.

Funktion LottieAnimPage(){

    const anim = useRef(neuer Animated.Value(0)).current;

    Funktion linearAnim() {
        Animiert.Timing(anim, {
            toWert: 1,
            Dauer: 5000,
            Lockerung: Easing.linear,
        }).Start();
    }

    React.useEffect(() => {
        linearAnim();
    }, []);

    zurückkehren (
        <LottieView-Quelle={erfordert('../animations/TwitterHeart.json')}
                    Fortschritt={anim} />
    )
}

Es ist ersichtlich, dass der Kern der Realisierung des Lottie-Animationseffekts immer noch darin besteht, die ursprüngliche Lottie-Animation zu erstellen. Zuerst müssen wir Adobe After Effects installieren und damit die Originalanimation von Lottie erstellen, dann das Plug-In Bodymovin installieren und schließlich die Originalanimation von Lottie als animierte JSON-Datei exportieren. Wenn Adobe After Effects nicht installiert ist, können Sie es von der offiziellen Website von Adobe herunterladen und installieren, wie in Abbildung 3-7 gezeigt.

Beenden Sie After Effects und laden Sie das neueste ZXP-Installationsprogramm herunter, um es zu installieren. Laden Sie nach Abschluss der Installation das neueste Bodymovin-Plug-in herunter. Öffnen Sie das ZXP-Installationsprogramm und ziehen Sie das Bodymovin-Plug-In in das ZXP-Installationsfenster, um es zu installieren, wie in Abbildung 3-8 gezeigt.

Öffnen Sie anschließend After Effects und klicken Sie auf [Fenster] → [Erweiterungen], um das Bodymovin-Plug-In anzuzeigen. Natürlich bietet die offizielle Lottie-Website auch viele coole Animationen, und Sie können die JSON-Dateien dieser Animationen direkt herunterladen und verwenden, wie in Abbildung 3-9 gezeigt.

Dies ist das Ende dieses Artikels über die Implementierung von Lottie-Animationen durch React Native. Weitere relevante Inhalte zu Lottie-Animationen durch React Native finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!