更新记录
0.1.9(2025-05-24)
- fix: 修复web 端不能全屏的问题
0.1.8(2025-05-19)
- feat: 兼容uniappx web、微信小程序、安卓、ios
0.1.7(2025-05-19)
- feat: 废除原来的app vue实现方式,使用原生的插件
- feat: 兼容uniappx web、微信小程序、安卓、ios
平台兼容性
uni-app(4.44)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | - | - | - | - | - | - | - | - | - |
uni-app x(4.61)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
√ | √ | 5.0 | 12 | - | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
lime-svga
- svga动画渲染库,兼容uniapp(微信小程序、H5、安卓、IOS)/uniappx(微信小程序、H5、安卓、IOS)
- uniappx app端依赖了lime-svga-x这个原生插件
文档
🚀 svga【站点1】 🌍 svga【站点2】 🔥 svga【站点3】
安装
插件市场导入,H5安装svgaplayerweb
依赖,APP端需要导入lime-svga-x
// h5
npm install svgaplayerweb --save
代码演示
方式一
<view class="content" style="height: 750rpx">
<l-svga src="https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga"></l-svga>
</view>
方式二
uniapp
<view class="content" style="height: 750rpx">
<l-svga ref="svga" @init="render"></l-svga>
</view>
const render = async ({parser, player}) => {
const videoItem = await parser.load("https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga");
await player.setVideoItem(videoItem);
// 设置当前动画的循环次数,0代表无限循环 默认 0
player.loops = 1
// 开始播放动画,reverse = true 时则反向播放。
player.startAnimation()
// 监听动画完成
player.onFinished(() => {
console.log('动画结束')
})
}
UniappX
<l-svga @init="render" style="height: 750rpx"></l-svga>
import { SVGA } from '@/uni_modules/lime-svga'
const render = async ({parser, player} : SVGA) => {
const videoItem = await parser.load(path);
await player.setVideoItem(videoItem);
player.loops = 5
player.startAnimation()
player.onFinished(() => {
console.log('动画结束')
})
}
Props
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
src | svga地址,网络或本地 | string |
`` | 0.0.2 |
Player
-
◼
loops = 0
属性,设置当前动画的循环次数,0代表无限循环。 -
◼
clearsAfterStop = true
属性,为 true 时,表示动画停止播放后默认清空画布。 -
◼
fillMode = "Forward"
属性,为 Forward 时,表示动画播放结束后保留在最后一帧。为 Backward 时,表示保留在第一帧。 -
◼
async setVideoItem(videoItem?: VideoEntity): Promise<any>
设置需要播放的VideoEntity
动画实体。 -
◼
setContentMode(contentMode: string)
设置动画缩放模式,可选值为 Fill / AspectFill / AspectFit。 -
◼
startAnimation(reverse: boolean = false)
开始播放动画,reverse = true 时则反向播放。 -
◼
startAnimationWithRange(range: Range, reverse: boolean = false)
开始播放动画,在指定Range
内播放。 -
◼
pauseAnimation()
暂停播放动画。 -
◼
stopAnimation(clear?: boolean)
停止播放动画,当 clear 为 true 时,清空画布。 -
◼
clear()
清空画布 -
◻
stepToFrame(frame: number, andPlay: boolean = false)
跳转动画的指定帧,andPlay 为 true 时,从该帧开始播放动画。 -
◻
stepToPercentage(percentage: number, andPlay: boolean = false)
跳转动画的指定进度百分比,andPlay 为 true 时,从该帧开始播放动画。 -
◼
async setImage(src: string, forKey: string): Promise<any>
使用图片替换指定元素 -
◼
setText(dynamicText: DynamicText, forKey: string)
添加文本到指定元素上 -
◻
clearDynamicObjects()
清空所有替换元素。 -
◼
onFinished(callback: () => void)
监听动画完成 -
◼
onFrame(callback: (frame: number) => void)
监听动画播放过程中,当前帧的变化。 -
◼
onPercentage(callback: (percentage: number) => void)
监听动画播放过程中,当前进度的变化。
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。