更新记录

0.0.9（2026-06-12）

• feat: uniappx蒸气模式

0.0.8（2026-05-14）

• fix: 鸿蒙运行问题

0.0.7（2025-12-08）

• feat: 增加setContentMode方法

平台兼容性

uni-app x(4.74)

lime-svga-x SVGA动画播放器

一个高性能的SVGA动画播放组件（uni-app x），用于展示SVGA格式的动画。支持远程/本地资源加载、精准动画控制、动态内容替换等功能，可用于展示复杂动画效果、交互反馈、引导页面等多种场景。组件提供了丰富的控制API，可以满足各种复杂的动画需求。

安装方法

1. 在uni-app插件市场中搜索并导入lime-svga-x
2. 导入后在页面使用组件标签
3. 使用自定义基座进行调试和预览

代码演示

基础用法（自动播放）

最简单的用法，设置 src 后自动加载并播放，loops 为 0 表示无限循环。

<l-svga-x
  style="height: 200px; background-color: #333;"
  src="/static/svga/animation.svga"
  :auto-play="true"
  :loops="0"
  @finished="onFinished"
  @frame="onFrame"
  @percentage="onPercentage"
/>

const svgaPlayer = ref<LSvgaXComponentPublicInstance | null>(null)

function onFinished() {
  console.log('动画播放完成')
}
function onFrame(frame : number) {
  console.log('当前帧', frame)
}
function onPercentage(percent : number) {
  console.log('播放百分比', percent)
}

手动控制

设置 auto-play 为 false，通过 ref 手动调用方法控制播放。

<l-svga-x
  style="height: 200px; background-color: #333;"
  ref="svgaPlayer"
  src="/static/svga/animation.svga"
  :auto-play="false"
  :loops="1"
  @finished="onFinished"
/>
<view class="btn-group">
  <text class="btn" @click="onPlay">播放</text>
  <text class="btn" @click="onPause">暂停</text>
  <text class="btn" @click="onStop">停止</text>
  <text class="btn" @click="onStepToFrame">跳转到第10帧</text>
</view>

const svgaPlayer = ref<LSvgaXComponentPublicInstance | null>(null)

function onFinished() {
  console.log('动画播放完成')
}
function onPlay() {
  svgaPlayer.value?.startAnimation()
}
function onPause() {
  svgaPlayer.value?.pauseAnimation()
}
function onStop() {
  svgaPlayer.value?.stopAnimation(true)
}
function onStepToFrame() {
  svgaPlayer.value?.stepToFrame(10, true)
}

动态内容替换

动态替换SVGA动画中的文本或图片内容。

// 替换文本
svgaPlayer.value?.setText({
  text: "新文本内容",
  color: "#FF0000"
}, "textLayer")

// 替换图片
svgaPlayer.value?.setImage("/static/new-image.png", "imageLayer")

循环与填充模式

// 设置无限循环
svgaPlayer.value?.setLoops(0)

// 设置循环3次
svgaPlayer.value?.setLoops(3)

// 设置动画结束后停留在最后一帧
svgaPlayer.value?.setFillMode('Forward')

// 设置动画结束后停留在第一帧
svgaPlayer.value?.setFillMode('Backward')

// 设置动画结束后清空画布
svgaPlayer.value?.setFillMode('Clear')

// 设置填充模式
svgaPlayer.value?.setContentMode('AspectFit')

API文档

Props 属性说明

Events 事件

Methods 方法

通过 ref 获取组件实例后可以调用以下方法：

文本替换参数

使用 setText 方法时，dynamicText 参数支持以下属性：

{
  text: "文本内容",    // 要显示的文本
  color: "#FF0000",   // 文本颜色
  "font-size": 20     // 文本大小
}

注意事项

1. 本组件为 uni-app x 组件，需在 uni-app x 项目中使用
2. 组件需要在自定义基座中运行，请确保正确配置
3. 动态内容替换功能需要SVGA文件中预先设置好对应的图层标识
4. 在Android和iOS平台上可能存在细微的渲染差异
5. 大型SVGA文件可能会占用较多内存，请合理控制文件大小

文档链接

• SVGA动画播放器文档 - 站点1
• SVGA动画播放器文档 - 站点2
• SVGA动画播放器文档 - 站点3

支持与赞赏

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

支付宝赞助	微信赞助