更新记录

0.0.3（2025-05-23）

• fix: 修复参数与函数名相同报错的问题

0.0.2（2025-05-23）

• fix: 修复参数与函数名相同报错的问题

0.0.1（2025-04-02）

• init

平台兼容性

uni-app

uni-app x

lime-svga-x

特性

✅ 原生性能渲染
✅ 支持远程/本地 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

方法

通过 ref 调用：

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

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

事件

高级用法

动态内容替换

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

// 替换文本
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');