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 =