React Native 实现Lottie动画
2023-09-27 14:22:50 时间
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 =
相关文章
- CSS 阴影动画优化技巧一则
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
- [UWP]用Win2D和CompositionAPI实现文字的发光效果,并制作动画
- 爆炸销毁动画组件Explosions
- 在线视频转gif动画工具 在线视频转gif动画工具下载
- Qt编写自定义控件8-动画按钮组控件
- 高仿小米加载动画效果
- iOS开发基础知识:Core Animation(核心动画)
- React动画库之react-transition-group(入场enter、出场exit、初始化appear)
- 2022版本unity-2D游戏官方案例【2】--带视频案例(层级渲染,物理碰撞,粒子动画,UI等多位基础一体化)
- 10款jQuery/CSS3动画应用 超有用