LimeUI+1.2.1

主题

LimeSvgaX SVGA动画播放器 ​

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

文档链接 ​

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

安装方法 ​

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

特性 ​

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

代码演示 ​

基础用法 ​

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

html
<template>
  <l-svga-x 
    ref="svgaPlayer"
    src="https://example.com/animation.svga"
    @loaded="onLoaded"
    @percentage="onPercentage"
  />
</template>
js
export default {
  methods: {
    onPercentage(progress) {
      console.log('当前播放进度：', progress)
    },
    onLoaded() {
      // uniappx
      (this.$refs.svgaPlayer as LSvgaXElement).startAnimation()
      // uniapp
      // this.$refs.svgaPlayer.startAnimation()
    }
  }
}

动态加载动画 ​

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

html
<template>
  <l-svga-x ref="svgaPlayer" @loaded="onLoaded" />
  <button @click="loadNewAnimation">加载新动画</button>
</template>
js
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表示无限循环。

html
<template>
  <l-svga-x 
    ref="svgaPlayer"
    src="https://example.com/animation.svga"
    @loaded="onLoaded"
  />
  <button @click="setInfiniteLoop">设置无限循环</button>
  <button @click="setLoopCount">设置循环3次</button>
</template>
js
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)
    }
  }
}

精确控制播放 ​

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

html
<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>
js
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动画中的文本或图片内容。

html
<template>
  <l-svga-x 
    ref="svgaPlayer"
    src="https://example.com/animation.svga"
    @loaded="onLoaded"
  />
  <button @click="replaceText">替换文本</button>
  <button @click="replaceImage">替换图片</button>
</template>
js
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 属性说明 ​

属性名说明类型默认值
srcSVGA资源地址，支持网络URL或本地路径string''

Events 事件 ​

事件名说明回调参数
init组件初始化完成时触发-
loaded资源加载成功时触发{url, videoitem}
frame每帧渲染时触发当前帧数
finished动画播放完成时触发（非循环模式）-
percentage播放进度变化时触发当前进度百分比

Methods 方法 ​

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

方法名说明参数
load加载新的SVGA动画资源url: string - 资源地址
startAnimation开始播放动画-
pauseAnimation暂停播放动画-
stopAnimation停止并重置动画-
setLoops设置循环次数count: number - 循环次数，0表示无限循环
stepToFrame跳转到指定帧frame: number - 目标帧
play: boolean - 是否继续播放
stepToPercentage跳转到指定百分比位置percent: number - 百分比值(0-100)
play: boolean - 是否继续播放
setText动态替换文本内容content: object - 文本对象
key: string - 元素标识
setImage动态替换图片元素src: string - 图片地址
key: string - 元素标识
setFillMode设置填充模式mode: string - 填充模式，如'forward'

文本替换参数 ​

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

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

注意事项 ​

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

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码