iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React Native项目中使用Lottie动画的方法
  • 691
分享到

React Native项目中使用Lottie动画的方法

2024-04-02 19:04:59 691人浏览 八月长安
摘要

Lottie是airbnb开源的一个面向iOS、Android、React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态

Lottie是airbnb开源的一个面向iOSAndroidReact 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动画内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: React Native项目中使用Lottie动画的方法

本文链接: https://www.lsjlt.com/news/137495.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • React Native项目中使用Lottie动画的方法
    Lottie是Airbnb开源的一个面向iOS、Android、React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态...
    99+
    2022-11-12
  • Javascript动画插件lottie-web的使用方法
    lottie可以将一个json数据渲染成一个动画,而且支持多平台,在不同的平台下使用同一个json文件即可实现相同的效果,非常的方便。这里介绍前端的使用方法。https://gith...
    99+
    2022-11-13
  • 在 React 项目中全量使用 Hooks的方法
    目录前言React HooksuseStateuseReducer基础用法进阶用法useContextuseEffectuseLayoutEffectuseRefuseImperat...
    99+
    2022-11-13
    React使用 Hooks  React 项目使用 Hooks
  • React项目中使用Redux的 react-redux
    目录背景UI 组件容器组件connect()mapStateToProps()mapDispatchToProps()组件实例:计数器背景 在前面文章一文理解Redux及其工作原理中...
    99+
    2022-11-13
  • React项目如何使用Element的方法步骤
    初次在react项目中使用element框架,碰到了一些很简单的问题,但是卡了很久才解决,写篇博客记录一下。 1、安装: 在项目目录下下载: npm i element-rea...
    99+
    2022-11-12
  • 在 React Native 中使用 CSS Modules的配置方法
    目录安装依赖和配置使用示例有些前端工程师希望也能像开发 web 应用那样,使用 CSS Modules 来开发 React Native。本文将介绍如何在 React Native ...
    99+
    2022-11-13
    React Native使用 CSS Modules React  CSS Modules
  • react创建项目启动报错的完美解决方法
    目录一、预备知识:二、创建项目步骤:三、启动项目时可能出现的报错:四、Todolist项目相关库:五、GitHub搜索案例相关库:六、尚硅谷路由案例相关库:七、UI库案例相关库:八、...
    99+
    2022-11-13
  • react项目中引入图片的方法有哪些
    这篇文章主要介绍了react项目中引入图片的方法有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。img标签引入图片因为react其实是通过js的reader函数渲染的页面...
    99+
    2023-06-15
  • vue项目中使用TDesign的方法
    目录前言:一、使用vue-cli手脚架创建vue项目二、配置vue及vue模板编译器版本三、安装tdesign-vue和less四、测试常见错误前言: 本文只介绍如何在vue项目中配...
    99+
    2023-05-15
    vue使用TDesign vue TDesign
  • vue3项目中使用tinymce的方法
    目录1、安装相关依赖2、下载中文包3. 引入皮肤和汉化包4. 封装组件:在src/components下新建TEditor.vue,并写入以下代码5. 注册及使用组件tinymce是...
    99+
    2023-05-17
    vue3使用tinymce vue使用tinymce
  • React项目搭建与Echars工具使用的方法是什么
    今天小编给大家分享一下React项目搭建与Echars工具使用的方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、...
    99+
    2023-07-05
  • Flutter在项目中使用动画不使用包实现详解
    目录前言正文1 按下按钮柔软的感觉2 想要一个像 Instagram 一样的喜欢按钮吗?3 动画页面过渡4 动画文字5 更改/闪动文本样式前言 动画对于 web 和移动应用程序都非常...
    99+
    2022-11-21
    Flutter项目动画使用 Flutter 动画
  • 关于React Native使用axios进行网络请求的方法
    在前端开发中,能够完成数据请求的方式有很多,如Ajax、jQuery ajax、axios和fetch等。不过,随着技术的发展,现在能够看到的基本上也就axios和fetch两种。 ...
    99+
    2022-11-12
  • TypeScript在React项目中的使用实践总结
    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念。关于TS的类型查看可以使用在线TS工具👉TypeScri...
    99+
    2022-11-12
  • vue项目中使用骨架屏的方法
    现在的应用开发,基本上都是前后端分离的,前端主流框架有SPA、MPA等,那么解决页面渲染、白屏时间成为首要关注的点 webpack可以按需加载,减小首屏需要加载代码的体积; 使用CD...
    99+
    2022-11-12
  • Springboot项目中使用redis的配置方法
    小编给大家分享一下Springboot项目中使用redis的配置方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!springboot是什么springboot一...
    99+
    2023-06-14
  • vue项目中main.js使用方法详解
    目录第一部分:main.js文件解析第二部分:Vue.use的作用以及什么时候使用Vue.use是什么?(官方文档)Vue.use()什么时候使用?补充:关于main.js方便小技巧...
    99+
    2022-11-13
  • spring项目中切面及AOP的使用方法
    使用AOP的原因(AOP简介) 我们知道,spring两大核心,IOC(控制反转)和AOP(切面),那为什么要使用AOP,AOP是什么呢,严格来说,AOP是一种编程规范,是一种编程思...
    99+
    2022-11-12
  • Redis在项目中的使用方法有哪些
    本篇内容介绍了“Redis在项目中的使用方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!springboot中redis相关配置po...
    99+
    2023-06-22
  • vue3项目中keepAlive的使用方法是什么
    vue3项目中keepAlive的使用方法是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。keepalive是Vue的内置组件,作用是将组件缓存在内存当中,...
    99+
    2023-06-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作