更新记录

0.2.3（2025-08-31）

• feat: 兼容uniappx 鸿蒙next

0.2.2（2025-08-11）

• fix: 修复文件名冲突导致uniappx无法运行

0.2.1（2025-07-09）

• fix: 修复h5报错问题

平台兼容性

uni-app(4.44)

uni-app x(4.61)

lime-svga SVGA动画组件

一个高性能的SVGA动画渲染组件，完美兼容UniApp（微信小程序、H5、安卓、iOS）和UniAppX（微信小程序、H5、安卓、iOS、鸿蒙Next）平台。支持加载、播放、暂停SVGA动画，并提供丰富的动画控制和自定义功能。

插件依赖：UniAppX App端需要依赖 lime-svga-x 原生插件

文档链接

📚 组件详细文档请访问以下站点：

• SVGA动画组件文档 - 站点1
• SVGA动画组件文档 - 站点2
• SVGA动画组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-svga
2. 根据平台安装相应依赖：
   • H5：npm install svgaplayerweb --save
   • Uniappx App端：需要额外导入lime-svga-x原生插件
3. 需要源码才能运行

代码演示

基础用法

最简单的方式，直接设置src属性即可播放SVGA动画。

<view class="content" style="height: 750rpx">
  <l-svga src="https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga"></l-svga>
</view>

高级用法

通过init事件获取parser和player实例，实现更多自定义功能。

UniApp示例

<view class="content" style="height: 750rpx">
  <l-svga ref="svga" @init="render"></l-svga>
</view>

const render = async ({parser, player}) => {
  // 加载SVGA文件
  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 type { 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('动画结束')
  })
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-svga/components/lime-svga -->
<lime-svga />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Player 实例方法

contentMode 可选值

常见问题

• 确保网络资源允许跨域访问
• App端需要额外安装lime-svga-x原生插件
• 如果动画无法播放，请检查SVGA文件格式是否正确

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助