qlottie Lottie动画组件

渲染出一个Lottie动画

特殊说明

API兼容性

QRN: 4.5.3
IOS: 80011228
Android: 60001355

安装

npm install @qnpm/q-lottie --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import QLottieView from '@qnpm/q-lottie';

const speeds = [1, 10, 50];
<QLottieView
    speed={speeds[speedIndex]}
    source={LOTTIE_ZIP}
    lottieIndex="qdesignloading"
    aspectRadio={1.2}
    loop
    autoPlay
    resizeMode="cover"
    hardwareAccelerationAndroid
/>

显示代码

import QLottieView from '@qnpm/q-lottie';

const modes = ['cover', 'contain', 'center'];
<QLottieView
    speed={1}
    source={LOTTIE_ZIP}
    lottieIndex="qdesignloading"
    aspectRadio={1.2}
    loop
    autoPlay
    resizeMode={modes[modeIndex]}
    hardwareAccelerationAndroid
/>

属性说明

属性名 类型 默认值 是否必须 说明
autoPlay boolean false 否 是否自动播放
customStyle ViewStyle {} 否 指定lottieView的样式同view的style 实际是给LottieView的最外层设置style
source string | object '' 否 动画资源，url或者{resourceMap:{key: 'url地址', lottieIndex:key}}key需要保持相同
lottieIndex string qdesignloading 否 lottie执行自定义标识，在source为url字符串时，必传
loop boolean true 否 是否循环播放
onAnimationFinish function 无默认值 否 动画完成回调，当loop为false有效
onLoadFailure function 否 lottie资源加载失败的回调 要求版本>= 2.0.3
onLoadSuccess function 否 lottie资源加载成功的回调(2.0.3版本前使用onLottieFinish, 为更准确表意，改为onLoadSuccess)
resizeMode cover｜contain｜center contain 否 内容展示模式（同Image）
speed number 1 否 指定动画执行速率，值越大，动画执行越快

补充说明

view的 method： play 播放动画 play(startFrame, endFrame) 播放动画 参数开始帧和结束帧 reset 重置动画

source：

例如{
       w: width,
       h: 1,
       resourceMap: {
       		mine_float_layer: lottieZip,
       		lottieIndex: 'mine_float_layer'
      }

	w：宽度
	h：高度
    lottieIndex 的值，必须和 资源的key保持一致,例如 lottieIndex value是 mine_float_layer ，那么资源的key必须是 mine_float_layer
```   
Location
NavBar