更新记录
1.0.5(2024-05-31)
修改页面组件事件名称。
1.0.4(2024-05-26)
优化安卓端插件内部事件触发逻辑。
1.0.3(2024-05-25)
1.解决iOS插件事件触发问题。 2.修改页面组件调用ID为svga-player。
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.7.0,Android:4.4,iOS:11,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
概述
XF-SVGAPlayer封装了SVGA播放功能,可以播放带音频的SVGA文件。
模块调用
<svga-player ref="svgaPlayer" :path="path" :loop="loop" :hidden="hidden"
:style="{width:widthNum+'rpx',height:heightNum+'px'}" @start="onStart"
@finished="onFinished" @frame="onFrame" @percentage="onPercentage">
</svga-player>
参数说明:
dataList:
- 类型:JSON型
- 描述:(可选项)返回按钮监听。
{ path : '',//可播放的svga文件地址 loop : false,//是否循环播放 fillMode :'Backward',//Backward Forward Clear hidden : false//是否隐藏 }
模块接口
pauseAnimation
暂停播放。
uni-app项目中(nvue)调用示例:
this.$refs["svgaPlayer"].pauseAnimation();
uni-app x项目(uvue)中调用示例:
// #ifdef APP-ANDROID
import { SvgaPlayerElement } from 'uts.sdk.modules.XFSVGAPlayerUTS';
// #endif
// #ifdef APP-ANDROID
(this.$refs["svgaPlayer"] as SvgaPlayerElement).pauseAnimation();
// #endif
// #ifdef APP-IOS
this.$refs["svgaPlayer"].pauseAnimation();
// #endif
可用性
iOS、Android系统
可提供的1.0.0及更高版本
startAnimation
暂停后恢复播放
uni-app项目中(nvue)调用示例:
this.$refs["svgaPlayer"].startAnimation();
uni-app x项目(uvue)中调用示例:
// #ifdef APP-ANDROID
import { SvgaPlayerElement } from 'uts.sdk.modules.XFSVGAPlayerUTS';
// #endif
// #ifdef APP-ANDROID
(this.$refs["svgaPlayer"] as SvgaPlayerElement).startAnimation();
// #endif
// #ifdef APP-IOS
this.$refs["svgaPlayer"].startAnimation();
// #endif
可用性
iOS、Android系统
可提供的1.0.0及更高版本