Lottie是Airbnb開源的一個面向iOS、、React Native的動畫庫，能載入Adobe After Effects匯出的動畫，並且能讓原生App像使用靜態素材一樣使用這些動畫，完美實現炫酷的動畫效果。
使用流程上，Lottie動畫需要先使用Adobe After Effects做出原動畫，然後再使用官方提供的Bodymovin外掛把動畫匯出成on檔案，而這個Json檔案就是Lottie需要解析的動畫原始檔。
在React Native專案中使用Lottie動畫，需要先安裝lottie-react-native和lottie-ios外掛，如下所示。

yarn add lottie-react-native
yarn add [email protected]

安裝完成之後，可以使用react-native link命令來連結原生庫的依賴。當然，除此之外，我們還可以使用手動的方式來新增依賴。對於使用CocoaPods的iOS專案來說，需要新增如下的檔案。

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

然後，再執行pod install命令安裝外掛即可。對於原生Android來說，首先需要在android/settings.gradle檔案中新增如下內容。

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

接著，開啟app/ build.gradle檔案新增如下依賴。

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

最後，還需要將LottiePackage新增到ReactApplication的getPackages()方法中，如下所示。

imwww.cppcns.comport com.airbnb.android.react.lottie.LottiePackage;
    
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          ...  //省略其他程式碼
          new LottiePackage()
      );
   www.cppcns.com }
  };

到此，Lottie所需的原生開發環境就搭建好了。接下來，只需要使用Lottie提供的LottieView元件載入前面匯出的Json檔案即可，如下所示。

function LottieAnimPage(){
    return (
      <LottieView source={require('../animations/LottieLogo1.json')} autoPlay loop />
    )
}

export default LottieAnimPage;

同時，LottieView元件還提供了一個progress引數，用來給動畫新增一些額外的效果。例如，下面是使用progress實現點贊效果的示例程式碼。

function LottieAnimPage(){

    const anim = useRef(n客棧ew Animated.Value(0)).current;

    function linearAnim() {
        Animated.timing(anim,{
            toValue: http://www.cppcns.com1,duration: 5000,easing: Easing.linear,}).start();
    }

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

    return (
        <LottieView source={require('../animations/TwitterHeart.json')}
                    progress={anim}  />
    )
}

可以看到，實現Lottie動畫效果的核心還在如何製作Lottie原動畫。首先，我們需要安裝Adobe After Effects，並使用它製作Lottie原動畫，然後再安裝Bodymovin外掛，最後將Lottie原動畫匯出為動畫的Json檔案。如果沒有安裝Adobe After Effects，可以到Adobe的官網下載安裝，如圖3-7所示。

退出After Effects，下載最新的ZXP Installer進行安裝。安裝完成之後，再下載最新的Bodymovin外掛。開啟ZXP Installer，將Bodymovin外掛拖到ZXP Installer的視窗中進行安裝，如圖3-8所示。

接下來，開啟After Effects，依次點選【Window】→【Extensions】就可以看到Bodymovin外掛。當然，Lottie官網也提供了很多炫酷的動畫，可以直接下載這些動畫的Json檔案就可以使用，如圖3-9所示。

到此這篇關於React Native 實現Lottie動畫的文章就介紹到這了,更多相關React Native Lottie動畫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！