经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
React Native项目中使用Lottie动画的方法
来源:jb51  时间:2021/10/8 13:08:31  对本文有异议

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插件,如下所示。

  1. yarn add lottie-react-native
  2. yarn add lottie-ios@3.2.3

安装完成之后,可以使用react-native link命令来链接原生库的依赖。当然,除此之外,我们还可以使用手动的方式来添加依赖。对于使用CocoaPods的iOS项目来说,需要添加如下的脚本文件。

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

然后,再执行pod install命令安装插件即可。对于原生Android来说,首先需要在android/settings.gradle文件中添加如下内容。

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

接着,打开app/ build.gradle文件添加如下依赖。

  1. dependencies {
  2. ...
  3. implementation project(':lottie-react-native')
  4. ...
  5. }

最后,还需要将LottiePackage添加到ReactApplication的getPackages()方法中,如下所示。

  1. import com.airbnb.android.react.lottie.LottiePackage;
  2. @Override
  3. protected List<ReactPackage> getPackages() {
  4. return Arrays.<ReactPackage>asList(
  5. ... //省略其他代码
  6. new LottiePackage()
  7. );
  8. }
  9. };

到此,Lottie所需的原生开发环境就搭建好了。接下来,只需要使用Lottie提供的LottieView组件加载前面导出的Json文件即可,如下所示。

  1. function LottieAnimPage(){
  2. return (
  3. <LottieView source={require('../animations/LottieLogo1.json')} autoPlay loop />
  4. )
  5. }
  6.  
  7. export default LottieAnimPage;

同时,LottieView组件还提供了一个progress参数,用来给动画添加一些额外的效果。例如,下面是使用progress实现点赞效果的示例代码。

  1. function LottieAnimPage(){
  2.  
  3. const anim = useRef(new Animated.Value(0)).current;
  4.  
  5. function linearAnim() {
  6. Animated.timing(anim, {
  7. toValue: 1,
  8. duration: 5000,
  9. easing: Easing.linear,
  10. }).start();
  11. }
  12.  
  13. React.useEffect(() => {
  14. linearAnim();
  15. }, []);
  16.  
  17. return (
  18. <LottieView source={require('../animations/TwitterHeart.json')}
  19. progress={anim} />
  20. )
  21. }

可以看到,实现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动画内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号