更新记录

0.0.6（2025-09-26）

• fix: 修复安卓打包的问题

0.0.5（2025-09-17）

• fix: 修复ios打包问题

0.0.4（2025-08-31）

• feat：兼容uniappx 鸿蒙next

平台兼容性

uni-app x(4.74)

lime-svga-x SVGA动画播放器

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

文档链接

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

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

安装方法

1. 在uni-app插件市场中搜索并导入lime-svga-x
2. 导入后在页面使用组件标签
3. 使用自定义基座进行调试和预览
4. 鸿蒙Next需要lime-svga配合，并且还需要源码版本

   特性

   • ✅ 原生性能渲染，高效流畅
   • ✅ 支持远程/本地 SVGA 资源加载
   • ✅ 精准动画控制（播放/暂停/跳帧）
   • ✅ 动态内容替换（文本/图片）
   • ✅ 循环模式与填充策略
   • ✅ 实时进度回调

代码演示

基础用法

最简单的SVGA播放器用法，只需设置资源地址并监听加载完成事件。

<template>
  <l-svga-x 
    ref="svgaPlayer"
    src="https://example.com/animation.svga"
    @loaded="onLoaded"
    @percentage="onPercentage"
  />
</template>

export default {
  methods: {
    onPercentage(progress) {
      console.log('当前播放进度：', progress)
    },
    onLoaded() {
      // uniappx
      (this.$refs.svgaPlayer as LSvgaXElement).startAnimation()
      // uniapp
      // this.$refs.svgaPlayer.startAnimation()
    }
  }
}

动态加载动画

通过方法动态加载新的SVGA资源。

<template>
  <l-svga-x ref="svgaPlayer" @loaded="onLoaded" />
  <button @click="loadNewAnimation">加载新动画</button>
</template>

export default {
  methods: {
    onLoaded() {
       // uniapp
       // this.$refs.svgaPlayer.startAnimation()
       // uniappx
       (this.$refs.svgaPlayer as LSvgaXElement).startAnimation()
    },
    loadNewAnimation() {
      // this.$refs.svgaPlayer.load('https://example.com/new-animation.svga')
    }
  }
}

循环播放设置

设置动画循环播放次数，0表示无限循环。

<template>
  <l-svga-x 
    ref="svgaPlayer"
    src="https://example.com/animation.svga"
    @loaded="onLoaded"
  />
  <button @click="setInfiniteLoop">设置无限循环</button>
  <button @click="setLoopCount">设置循环3次</button>
</template>

export default {
  methods: {
    onLoaded() {
      (this.$refs.svgaPlayer as LSvgaXElement).startAnimation()
    },
    setInfiniteLoop() {
      (this.$refs.svgaPlayer as LSvgaXElement).setLoops(0)
    },
    setLoopCount() {
      (this.$refs.svgaPlayer as LSvgaXElement).setLoops(3)
    }
  }
}

精确控制播放

通过跳帧或跳转到指定百分比位置来精确控制动画播放。

<template>
  <l-svga-x 
    ref="svgaPlayer"
    src="https://example.com/animation.svga"
    @loaded="onLoaded"
  />
  <button @click="jumpToMiddle">跳转到50%</button>
  <button @click="jumpToFrame">跳转到第10帧</button>
</template>

export default {
  methods: {
    onLoaded() {
      (this.$refs.svgaPlayer as LSvgaXElement).startAnimation()
    },
    jumpToMiddle() {
      (this.$refs.svgaPlayer as LSvgaXElement).stepToPercentage(50, true)
    },
    jumpToFrame() {
      (this.$refs.svgaPlayer as LSvgaXElement).stepToFrame(10, true)
    }
  }
}

动态内容替换

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

<template>
  <l-svga-x 
    ref="svgaPlayer"
    src="https://example.com/animation.svga"
    @loaded="onLoaded"
  />
  <button @click="replaceText">替换文本</button>
  <button @click="replaceImage">替换图片</button>
</template>

export default {
  methods: {
    onLoaded() {
      (this.$refs.svgaPlayer as LSvgaXElement).startAnimation()
    },
    replaceText() {
      (this.$refs.svgaPlayer as LSvgaXElement).setText({ 
        text: "新文本内容", 
        color: "#FF0000" 
      }, "textLayer")
    },
    replaceImage() {
      (this.$refs.svgaPlayer as LSvgaXElement).setImage("/static/new-image.png", "imageLayer")
    }
  }
}

API文档

Props 属性说明

Events 事件

Methods 方法

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

文本替换参数

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

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

注意事项

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

支持与赞赏

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

支付宝赞助	微信赞助