lottie-react-native的使用

Lottie是适用于Android和iOS的动画库，它通过JSON格式导出的Adobe After Effects动画文件，可以在移动设备上进行渲染加载，以满足项目中经常需要展示的炫酷的动画效果，简单易用且进度可自定义控制。下面简单介绍一下用法：由于react native版本不同，其安装lottie-react-native的方式不同：1.React Native <=...

Bert丶seven

2997人浏览 · 2019-10-22 15:30:19

Bert丶seven · 2019-10-22 15:30:19 发布

Lottie是适用于Android和iOS的动画库，它通过JSON格式导出的Adobe After Effects动画文件，可以在移动设备上进行渲染加载，以满足项目中经常需要展示的炫酷的动画效果，简单易用且进度可自定义控制。下面简单介绍一下用法：

由于react native版本不同，其安装lottie-react-native的方式不同：

1.React Native <= 0.58.x 使用这种方式(由于项目中使用的是0.56版本，其他版本安装类似，不再赘述):

npm i --save lottie-react-native@2.5.11

或者：

yarn add lottie-react-native@2.5.11

2.添加依赖库到项目中:

react-native link lottie-react-native

3.如何使用?

首先引入组件：

import LottieView from 'lottie-react-native';

简单使用方法:

<LottieView
    autoPlay={true}
    source={images.animation_icon}
    progress={0}
    loop={true}
    enableMergePathsAndroidForKitKatAndAbove
/>

4.组件API介绍：

名称	描述	默认值
`source`	必填 -动画的来源。可以通过字符串或本地带有`uri`属性的对象引用，也可以是动画的实际JS对象（例如，通过类似方法获得）`require('../path/to/animation.json')`	无
`progress`	0到1 之间的数字，此数字表示动画的执行进度，可自义定。	`0`
`speed`	动画执行的速度。负值将使动画反向	`1`
`duration`	动画的持续时间（以毫秒为单位）。`speed`设置时优先。仅当`source`是动画的实际JS对象时才有效。	无
`loop`	布尔值，动画是否应循环播放。	`true`
`autoPlay`	布尔值，动画在显示时是否应自动开始播放。	`false`
`autoSize`	布尔值，动画是否应该根据动画JSON中的宽度自动调整自身大小。仅当`source`是动画的实际JS对象时才有效。	`false`
`style`	`View`提供样式属性	没有
`imageAssetsFolder`	仅Android可用	没有
`onAnimationFinish`	动画结束时将调用的回调函数。请注意，仅当`loop`设置为false 时，才会调用此回调。	没有

5.方法介绍：

方法	描述
`play`	通过ref在指定的时机播放动画，它也可以播放动画的一部分`play(startFrame, endFrame)`。
`reset`	将动画重置回`0`进度。

注意：这里经本人实际验证，也看了这个库的Issues，其他人也有遇到过这个问题：就是lottie-react-native加载资源时只能加载本地资源，虽然提供了加载网络资源的方法，但其实无法加载网络资源(至少经测试在android上是无法显示)。如果有需要加载网络动画资源还是需要使用react native自带的Image，只是android平台需特殊处理方可显示(后续介绍)。