LimeSvgaX

特性

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

文档

svga-x

安装

导入，在页面使用组件标签后自定义基座

代码演示

基础使用

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

export default {
	methods: {
		onPercentage(progress: number) {
			console.log(progress)
		},
		onLoaded(res: UTSJSONObject) {
			// uniappx
			(this.$refs.svgaPlayer as LSvgaXElement).startAnimation()
			// uniapp
			// this.$refs.svgaPlayer.startAnimation()
		}
  }
}

API 参考

Props

属性名	类型	默认值	说明
src	String	''	SVGA 资源地址（支持网络/本地）

方法

通过 ref 调用：

// uniapp
const player = this.$refs.svgaPlayer

// uniappx
const player = this.$refs["svgaPlayer"] as LSvgaXElement

方法名	参数说明	功能描述
load(url)	url: 资源地址	加载新动画
startAnimation()	-	开始播放
pauseAnimation()	-	暂停播放
stopAnimation()	-	停止并重置动画
setLoops(count)	count: 循环次数（0=无限）	设置循环次数
stepToFrame(frame, play)	frame: 目标帧，play: 是否继续播放	跳转到指定帧
stepToPercentage(percent, play)	percent: 0-100，play: 是否继续	跳转到百分比位置
setText(content, key)	content: JSON 文本对象，key: 元素标识	动态替换文本内容
setImage(src, key)	src: 图片地址，key: 元素标识	动态替换图片元素

事件

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

高级用法

动态内容替换

这两个方法没有测试，若不支持，可以提供相关的文件反馈

// 替换文本
player.setText({ 
  text: "New Text", 
  color: "#FF0000" 
}, "textLayer");
// 替换图片
player.setImage("/static/new-image.png", "imageLayer");

精准控制

// 设置无限循环
player.setLoops(0);
// 跳转到50%位置并继续播放
player.stepToPercentage(50, true);
// 设置播放结束保留最后一帧
player.setFillMode('forward');

源代码

组件源码