Lottie 动画 
V1.9.5+
概述
Lottie 动画，通过读取json文件信息实现动画效果。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 抖音小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | × | ✓ | ✓ | × | ✓ | × | ✓ | ✓ | × | ✓ |
温馨提示
App-Nvue与百度小程序端可使用官方组件 animation-view (opens new window)。小程序本身不支持动态执行脚本，lottie 的 expression 功能在小程序端是不支持的。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiLottie from "@/components/firstui/fui-lottie/fui-lottie.vue"
export default {
components:{
fuiLottie
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
使用本地json文件
通过 options 属性设置动画配置参数数据。
<fui-lottie :options="options"></fui-lottie>
1
import emptyJson from '@/static/json/nodata.json'
//data
data(){
return {
options: {
animationData: emptyJson
}
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
网络地址
通过 options 属性设置动画配置参数数据，action 属性设置动画操作。
<fui-lottie :options="option" :action="action"></fui-lottie>
1
//data
data() {
return {
option: {
path: 'https://res.firstui.cn/static/json/empty.json'
},
action: 'play'
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
完整页面示例
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Lottie</view>
<view class="fui-page__desc">Lottie 动画，通过读取json文件信息实现动画效果。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">本地json文件</view>
<view class="fui-flex__center">
<!-- 百度小程序平台path属性目前不支持远程地址，仅支持本地绝对路径 -->
<!-- #ifdef MP-BAIDU -->
<animation-view class="fui-animation" path="/static/json/nodata.json" loop :action="action"></animation-view>
<!-- #endif -->
<!-- #ifndef MP-BAIDU -->
<fui-lottie :options="options"></fui-lottie>
<!-- #endif -->
</view>
<!-- #ifndef MP-BAIDU -->
<view class="fui-section__title">网络地址</view>
<view class="fui-flex__center">
<fui-lottie :options="option" :action="action"></fui-lottie>
</view>
<!-- #endif -->
<view class="fui-flex__center fui-flex__column">
<fui-button type="gray" width="400rpx" height="84rpx" text="暂停播放" bold :margin="['24rpx']"
@click="ani('pause')"></fui-button>
<fui-button type="gray" width="400rpx" height="84rpx" text="开始播放" bold @click="ani('play')">
</fui-button>
<fui-button type="gray" width="400rpx" height="84rpx" text="停止播放" bold :margin="['24rpx']"
@click="ani('stop')">
</fui-button>
</view>
</view>
</view>
</template>
<script>
import emptyJson from '@/static/json/nodata.json'
export default {
data() {
return {
options: {
animationData: emptyJson
},
option: {
path: 'https://res.firstui.cn/static/json/empty.json'
},
action: 'play'
}
},
methods: {
//销毁隐藏可使用v-if自行控制
ani(action) {
if (this.action === action) return;
this.action = action
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-animation{
width: 600rpx;
height: 400rpx;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| width | Number, String | 宽度，单位rpx | 600 | - |
| height | Number, String | 高度，单位rpx | 400 | - |
| options | Object | 动画参数，具体属性见下方说明 | {} | - |
| action | String | 动画操作，可取值 play、pause、stop | play | - |
//options 动画参数属性 说明
{
//json地址，仅支持网络地址
path: '',
//本地json数据，与path必传其一，优先级高于path
animationData: '',
//是否自动播放
autoplay: true,
//是否循环播放
loop: true
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | - | - |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。