React Native 实现Lottie动画

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 =

React Native 实现Lottie动画相关推荐

使用React Native进行气泡动画
by Narendra N Shetty 由纳伦德拉·N·谢蒂(Narendra N Shetty) 使用React Native进行气泡动画 (Bubble animation with React ...
React Native开发之动画(Animations)
博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解另外,我 ...
React Native加载动画，lottie-web 将json解析成动画
1.安装依赖 npm install lottie-web --save 2.建立resources文件夹,内部导入AE动画的json文件且新建Lottie.js文件,封装Component组件 Lo ...
rn react native PanResponder手势动画实现窗口拖动滑动动画 Animated
个人笔记:(很多地方比较累赘,求指正) 需求:项目需要在RN窗口实现对其拖动和滑动动画,点击滑动: 思路:通过PanResponder监听手势操作.配合Animated实现不需要第三方包,比较简单 ...
React Native入门（十四）之动画（1）Animated详解
前言在APP的开发中,流畅合理的动画能大大提高用户体验,Android和iOS原生都有对应的动画系统,同样的在RN中也有用于创建动画的API,就是Animated.Animated库使得开发者可以非 ...
React Native 动画（Animated）
一.前言对于一个移动应用APP,其中的动画交互能够给用户带来很好的体验,所以动画在移动应用开发过程中是非常重要的; 二.React Native中实现动画的方式 -不断修改state -Animat ...
React Native动画Animated详解
在移动开发中,动画是提高用户体验不可缺少的一个元素.在React Native中,动画API提供了一些现成的组件:Animated.View,Animated.Text和Animated.Image默 ...
React Native 动画（Animated）笔记
学习笔记--方便下次查看大多数情况下,在 React Native 中创建动画是推荐使用 Animated API 的,其提供了三个主要的方法用于创建动画: 1.API Animated.timin ...
React Native每日Apple App动画第二部分：打开图像
在这篇文章中,我们将继续从当天React Native苹果应用程序的最后一部分继续. 在本教程的第一部分中,我们成功实现了React Native Shared元素过渡并设置了UI部分. 在这里,我们 ...

React Native 实现Lottie动画

React Native 实现Lottie动画相关推荐

最新文章

热门文章