LimeUI+1.2.0

主题

LimeSvga SVGA动画组件 ​

一个高性能的SVGA动画渲染组件，完美兼容UniApp（微信小程序、H5、安卓、iOS）和UniAppX（微信小程序、H5、安卓、iOS）平台。支持加载、播放、暂停SVGA动画，并提供丰富的动画控制和自定义功能。

插件依赖：UniAppX App端需要依赖 lime-svga-x 原生插件

文档链接 ​

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

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-svga
  2. 根据平台安装相应依赖：
    • H5：npm install svgaplayerweb --save
    • App端：需要额外导入lime-svga-x原生插件

代码演示 ​

基础用法 ​

最简单的方式，直接设置src属性即可播放SVGA动画。

html
<view class="content" style="height: 750rpx">
  <l-svga src="https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga"></l-svga>
</view>

高级用法 ​

通过init事件获取parser和player实例，实现更多自定义功能。

UniApp示例 ​

html
<view class="content" style="height: 750rpx">
  <l-svga ref="svga" @init="render"></l-svga>
</view>
js
const render = async ({parser, player}) => {
  // 加载SVGA文件
  const videoItem = await parser.load("https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga");
  // 设置动画
  await player.setVideoItem(videoItem);
  // 设置当前动画的循环次数，0代表无限循环 默认 0
  player.loops = 1
  // 开始播放动画，reverse = true 时则反向播放
  player.startAnimation()
  // 监听动画完成
  player.onFinished(() => {
    console.log('动画结束')
  })
}

UniAppX示例 ​

html
<l-svga @init="render" style="height: 750rpx"></l-svga>
js
import type { SVGA } from '@/uni_modules/lime-svga'

const render = async ({parser, player} : SVGA) => {
  const videoItem = await parser.load(path);
  await player.setVideoItem(videoItem);
  player.loops = 5
  player.startAnimation()
  player.onFinished(() => {
    console.log('动画结束')
  })
}

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 uni_modules/lime-svga/components/lime-svga -->
<lime-svga />

插件标签说明 ​

标签名说明
l-svga组件标签
lime-svga演示标签

Vue2使用说明 ​

main.js中添加以下代码：

js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
srcSVGA动画地址，支持网络或本地路径string-

Events 事件 ​

事件名说明回调参数
init组件初始化完成时触发{parser, player}

Player 实例方法 ​

属性/方法说明类型/参数默认值
loops设置当前动画的循环次数，0代表无限循环number0
clearsAfterStop动画停止播放后是否清空画布booleantrue
fillMode动画播放结束后的状态，Forward保留在最后一帧，Backward保留在第一帧string"Forward"
setVideoItem设置需要播放的动画实体async (videoItem?: VideoEntity): Promise<any>-
setContentMode设置动画缩放模式(contentMode: string)-
startAnimation开始播放动画(reverse: boolean = false)-
startAnimationWithRange在指定范围内播放动画(range: Range, reverse: boolean = false)-
pauseAnimation暂停播放动画()-
stopAnimation停止播放动画(clear?: boolean)-
clear清空画布()-
stepToFrame跳转到指定帧(frame: number, andPlay: boolean = false)-
stepToPercentage跳转到指定进度百分比(percentage: number, andPlay: boolean = false)-
setImage使用图片替换指定元素async (src: string, forKey: string): Promise<any>-
setText添加文本到指定元素上(dynamicText: DynamicText, forKey: string)-
clearDynamicObjects清空所有替换元素()-
onFinished监听动画完成(callback: () => void)-
onFrame监听当前帧的变化(callback: (frame: number) => void)-
onPercentage监听当前进度的变化(callback: (percentage: number) => void)-

contentMode 可选值 ​

值说明
Fill填充模式，不保持原有比例，填满整个容器
AspectFill保持原有比例填充，可能会裁剪内容
AspectFit保持原有比例适应，确保内容完全显示

常见问题 ​

  • 确保网络资源允许跨域访问
  • App端需要额外安装lime-svga-x原生插件
  • 如果动画无法播放，请检查SVGA文件格式是否正确

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码