更新记录

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) 监听动画播放过程中,当前进度的变化。

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问