Lottie is an open source animation library of Airbnb for iOS, Android and React Native. It can load animations exported by Adobe After Effects and allow Native apps to use these animations as static materials, perfectly realizing cool animation Effects. In terms of the usage process, Lottie animation needs to use Adobe After Effects to make the original animation, and then use the official Bodymovin plugin to export the animation into Json file, which is the source animation file that Lottie needs to parse. To use Lottie animations in React Native projects, you need to install lottie-React – Native and Lottie-ios plug-ins, as shown below.

Yarn add Lottie -react-native yarn add [email protected]Copy the code

Once installed, you can use the React-native link command to link native library dependencies. In addition, of course, we can add dependencies manually. For iOS projects using CocoaPods, add the following script files.

pod 'lottie-ios', :path => '.. /node_modules/lottie-ios' pod 'lottie-react-native', :path => '.. /node_modules/lottie-react-native'Copy the code

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-Copy the code

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

 dependencies {
  ...
  implementation project(':lottie-react-native')
  ...
}
Copy the code

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

import com.airbnb.android.react.lottie.LottiePackage; @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( ... // omit other code new LottiePackage()); }};Copy the code

At this point, the native development environment for Lottie is in place. Next, you simply load the PREVIOUSLY exported Json file using the LottieView component provided by Lottie, as shown below.

function LottieAnimPage(){ return ( <LottieView source={require('.. /animations/LottieLogo1.json')} autoPlay loop /> ) } export default LottieAnimPage;Copy the code

Also, the LottieView component provides a Progress parameter to add some extra effects to the animation. For example, here is sample code for implementing a like effect using Progress.

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 (
        <LottieView source={require('../animations/TwitterHeart.json')}
                    progress={anim}  />
    )
}
Copy the code

As you can see, the core of realizing Lottie animation effects is also how to make the original Lottie animation. First, we need to install Adobe After Effects and use it to create the Original Lottie animation, then install the Bodymovin plug-in, and finally export the Original Lottie animation as an animated Json file. If Adobe After Effects is not installed, download and install it from the Adobe official website, as shown in Figure 3-7.Exit After Effects and download the latest ZXP Installer to install. Once installed, download the latest Bodymovin plug-in. Open the ZXP Installer and drag the Bodymovin plug-in to the ZXP Installer window to install it, as shown in Figure 3-8.Next, open After Effects and click on [Window] → [Extensions] to see the Bodymovin plugin. Of course, Lottie’s official website also provides many cool animations. You can download the Json files of these animations to use, as shown in Figure 3-9.