Lottie是Airbnb开源的一个面向iOS、Android、React Native的动画库，能加载Adobe After Effects导出的动画，并且能让原生App像使用静态素材一样使用这些动画，完美实现炫酷的动画效果。
使用流程上，Lottie动画需要先使用Adobe After Effects做出原动画，然后再使用官方提供的Bodymovin插件把动画导出成Json文件，而这个Json文件就是Lottie需要解析的动画源文件。
在React Native项目中使用Lottie动画，需要先安装lottie-react-native和lottie-ios插件，如下所示。
yarn add lottie-react-native yarn add lottie-ios@3.2.3
安装完成之后，可以使用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()方法中，如下所示。
import com.airbnb.android.react.lottie.LottiePackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
... //省略其他代码
new LottiePackage()
);
}
};
到此，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(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} />
)
}
可以看到，实现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动画内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！