快捷導(dǎo)航

React Native項(xiàng)目中使用Lottie動(dòng)畫(huà)的方法

更新時(shí)間：2021年10月08日 11:37:19 作者：xiangzhihong8

這篇文章主要介紹了React Native 實(shí)現(xiàn)Lottie動(dòng)畫(huà)的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

Lottie是Airbnb開(kāi)源的一個(gè)面向iOS、Android、React Native的動(dòng)畫(huà)庫(kù)，能加載Adobe After Effects導(dǎo)出的動(dòng)畫(huà)，并且能讓原生App像使用靜態(tài)素材一樣使用這些動(dòng)畫(huà)，完美實(shí)現(xiàn)炫酷的動(dòng)畫(huà)效果。
使用流程上，Lottie動(dòng)畫(huà)需要先使用Adobe After Effects做出原動(dòng)畫(huà)，然后再使用官方提供的Bodymovin插件把動(dòng)畫(huà)導(dǎo)出成Json文件，而這個(gè)Json文件就是Lottie需要解析的動(dòng)畫(huà)源文件。
在React Native項(xiàng)目中使用Lottie動(dòng)畫(huà)，需要先安裝lottie-react-native和lottie-ios插件，如下所示。

yarn add lottie-react-native
yarn add lottie-ios@3.2.3

安裝完成之后，可以使用react-native link命令來(lái)鏈接原生庫(kù)的依賴(lài)。當(dāng)然，除此之外，我們還可以使用手動(dòng)的方式來(lái)添加依賴(lài)。對(duì)于使用CocoaPods的iOS項(xiàng)目來(lái)說(shuō)，需要添加如下的腳本文件。

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

然后，再執(zhí)行pod install命令安裝插件即可。對(duì)于原生Android來(lái)說(shuō)，首先需要在android/settings.gradle文件中添加如下內(nèi)容。

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

接著，打開(kāi)app/ build.gradle文件添加如下依賴(lài)。

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

最后，還需要將LottiePackage添加到ReactApplication的getPackages()方法中，如下所示。

import com.airbnb.android.react.lottie.LottiePackage;
    
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          ...  //省略其他代碼
          new LottiePackage()
      );
    }
  };

到此，Lottie所需的原生開(kāi)發(fā)環(huán)境就搭建好了。接下來(lái)，只需要使用Lottie提供的LottieView組件加載前面導(dǎo)出的Json文件即可，如下所示。

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

export default LottieAnimPage;

同時(shí)，LottieView組件還提供了一個(gè)progress參數(shù)，用來(lái)給動(dòng)畫(huà)添加一些額外的效果。例如，下面是使用progress實(shí)現(xiàn)點(diǎn)贊效果的示例代碼。

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}  />
    )
}

可以看到，實(shí)現(xiàn)Lottie動(dòng)畫(huà)效果的核心還在如何制作Lottie原動(dòng)畫(huà)。首先，我們需要安裝Adobe After Effects，并使用它制作Lottie原動(dòng)畫(huà)，然后再安裝Bodymovin插件，最后將Lottie原動(dòng)畫(huà)導(dǎo)出為動(dòng)畫(huà)的Json文件。如果沒(méi)有安裝Adobe After Effects，可以到Adobe的官網(wǎng)下載安裝，如圖3-7所示。

退出After Effects，下載最新的ZXP Installer進(jìn)行安裝。安裝完成之后，再下載最新的Bodymovin插件。打開(kāi)ZXP Installer，將Bodymovin插件拖到ZXP Installer的窗口中進(jìn)行安裝，如圖3-8所示。

接下來(lái)，打開(kāi)After Effects，依次點(diǎn)擊【W(wǎng)indow】→【Extensions】就可以看到Bodymovin插件。當(dāng)然，Lottie官網(wǎng)也提供了很多炫酷的動(dòng)畫(huà)，可以直接下載這些動(dòng)畫(huà)的Json文件就可以使用，如圖3-9所示。

到此這篇關(guān)于React Native 實(shí)現(xiàn)Lottie動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)React Native Lottie動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: