React Native 实现Lottie动画

Posted 2021-10-27 xiangzhihong8

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 =