Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use Lottie animation in React Native project". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use Lottie animation in React Native project".

Lottie is an open source Airbnb animation library for iOS, Android and React Native, which can load animations exported by Adobe After Effects and allow native App to use these animations like static material, perfect for cool animation effects.

In the use process, Lottie animation needs to use Adobe After Effects to make the original animation, and then use the official Bodymovin plug-in to export the animation to Json file, and this Json file is the animation source file that Lottie needs to parse.

To use Lottie animation in a React Native project, you need to install the lottie-react-native and lottie-ios plug-ins first, as shown below.

Yarn add lottie-react-nativeyarn add lottie-ios@3.2.3

After the installation is complete, you can use the react-native link command to link the dependencies of the native library. Of course, in addition to that, we can also add dependencies manually. For iOS projects that use CocoaPods, you need to add the following script file.

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

Then, execute the pod install command to install the plug-in. For native Android, you first need to add the following to the android/settings.gradle file.

Include': lottie-react-native'project (': lottie-react-native'). ProjectDir = new File (rootProject.projectDir,'.. / node_modules/lottie-react-

Next, open the app/ build.gradle file and add the following dependencies.

Dependencies {... Implementation project (': lottie-react-native').}

Finally, you need to add LottiePackage to the getPackages () method of ReactApplication, as shown below.

Import com.airbnb.android.react.lottie.LottiePackage; @ Override protected List getPackages () {return Arrays.asList (. / / omit other code new LottiePackage ();}}

At this point, the native development environment required for Lottie is set up. Next, you just need to load the previously exported Json file using the LottieView component provided by Lottie, as shown below.

Function LottieAnimPage () {return ()} export default LottieAnimPage

At the same time, the LottieView component also provides a progress parameter to add some extra effects to the animation. For example, the following is sample code that uses progress to achieve the like effect.

Function LottieAnimPage () {const anim = useRef (new Animated.Value (0)) .current; function linearAnim () {Animated.timing (anim, {toValue: 1, duration: 5000, easing: Easing.linear,}). Start ();} React.useEffect () = > {linearAnim ();}, []); return ()}

As you can see, the core of realizing the Lottie animation effect is how to make the original Lottie animation. First, we need to install Adobe After Effects and use it to make the original Lottie animation, then install the Bodymovin plug-in, and finally export the Lottie original animation as the Json file of the animation. If you do not have Adobe After Effects installed, you can download and install it at Adobe's official website, as shown in figure 3-7.

Exit After Effects and download the latest ZXP Installer for installation. After the installation is complete, download the latest Bodymovin plug-in. Open ZXP Installer and drag the Bodymovin plug-in to the window of ZXP Installer to install, as shown in figure 3-8.

Next, open After Effects and click [Window] → [Extensions] to see the Bodymovin plug-in. Of course, the official website of Lottie also provides a lot of cool animations. You can download the Json files of these animations directly and use them.

Thank you for your reading, the above is the content of "how to use Lottie animation in the React Native project". After the study of this article, I believe you have a deeper understanding of how to use Lottie animation in the React Native project. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.