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动画内容请搜寻我们以前的文章或继续浏览下面的相关文章希望大家以后多多支援我们!