更新记录
1.0.2(2023-12-25)
修复新版本工具编译错误的问题
1.0.1(2023-10-25)
初始化
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用说明
-
app端( 注:需要打包自定义基座运行,只能在nvue页面使用)
组件参数:
参数 |
类型 |
默认值 |
可选值 |
必填 |
说明 |
url |
string |
- |
- |
Y |
url地址,支持远程和本地json |
autoplay |
boolean |
false |
true/false |
N |
是否自动播放 |
action |
string |
stop |
play/pause/stop |
N |
动作 |
speed |
number |
1 |
- |
N |
动画播放速度 |
loopCount |
number |
0 |
大于0的数字 |
N |
动画循环的次数 |
progressVal |
number |
0.0 |
0.0~1.0 |
N |
播放进度 |
-
方法
- play 动画播放
- pause 动画暂停
- setRepeatMode 设置动画的正反序播放,可选值"RESTART/REVERSE"
- setAnimSpeed 设置动画的速度,参数与组件参数一致
使用方式:
<template>
<view class="content">
<xw-lottie-view
ref='lottieWrap'
:autoplay="autoplay"
:url="url"
:loopCount="loopCount"
:action="action"
:style="{width:'750rpx',height:'300px'}"
></xw-lottie-view>
<view class="btn-wrap">
<button class="btn" @tap="play">开始播放</button>
<button class="btn" @tap="pause">暂停播放</button>
<button class="btn" @tap="changeSpeed">动画加速</button>
</view>
</view>
</template>
<script setup lang="ts">
import {ref}from 'vue';
let url=ref("/static/Ani_02.json");
const autoplay=ref(false);
const loopCount=ref(0);
const action=ref('stop');
const lottieWrap=ref();
const changeSpeed=()=>{
lottieWrap.value.setAnimSpeed(1.1);
}
const play=()=>{
lottieWrap.value.play();
}
const pause=()=>{
lottieWrap.value.pause();
}
</script>
参数说明:
参数 |
类型 |
默认值 |
可选值 |
必填 |
说明 |
path |
string |
- |
- |
Y |
path地址,只支持远程json |
autoplay |
boolean |
false |
true/false |
N |
是否自动播放 |
loop |
number |
false |
true/false |
N |
是否循环播放 |
使用方式:
说明:需要创建一个ID为lottie的标签,然后直接引入方法调用会返回一个动画实例,可通过实例调用内部方法
<template>
<view class="wrap">
<view id='lottie' class="lottie"></view>
<button type="default" @click="paly">播放</button>
<button type="default" @click="pause">暂停</button>
<button type="default" @click="setSeed">加速</button>
</view>
</template>
<script setup lang="ts">
import {ref}from 'vue';
import {loadLottieHandle} from '../../uni_modules/xw-lottie-view'; //引入
let lottieInstance=loadLottieHandle({
path:"https://b.bdstatic.com/miniapp/images/lottie_example_one.json",
autoplay:false,
loaded:()=>{
console.log('加载成功回调')
}
});
//播放动画
const paly=()=>{
lottieInstance.play();
};
//暂停动画
const pause=()=>{
lottieInstance.pause();
};
//设置速度
const setSeed=()=>{
lottieInstance.setSeed(2);
}
</script>