LimeSvga

• svga动画渲染库，兼容uniapp（微信小程序、H5、安卓、IOS）/uniappx（微信小程序、H5、安卓、IOS）
• uniappx app端依赖了lime-svga-x这个原生插件

文档

svga

安装

导入，H5安装svgaplayerweb依赖，APP端需要导入lime-svga-x

// h5
npm install svgaplayerweb --save

代码演示

方式一

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

方式二

uniapp

<view class="content" style="height: 750rpx">
	<l-svga ref="svga" @init="render"></l-svga>
</view>

const render = async ({parser, player}) => {
	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

<l-svga @init="render" style="height: 750rpx"></l-svga>

import { 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('动画结束')
	})
}

Props

参数	说明	类型	默认值	版本
src	svga地址，网络或本地	string	``	0.0.2

Player

• ◼ loops = 0 属性，设置当前动画的循环次数，0代表无限循环。

• ◼ clearsAfterStop = true 属性，为 true 时，表示动画停止播放后默认清空画布。

• ◼ fillMode = "Forward" 属性，为 Forward 时，表示动画播放结束后保留在最后一帧。为 Backward 时，表示保留在第一帧。

• ◼ async setVideoItem(videoItem?: VideoEntity): Promise<any> 设置需要播放的 VideoEntity 动画实体。

• ◼ setContentMode(contentMode: string) 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit。

• ◼ startAnimation(reverse: boolean = false) 开始播放动画，reverse = true 时则反向播放。

• ◼ startAnimationWithRange(range: Range, reverse: boolean = false) 开始播放动画，在指定 Range 内播放。

• ◼ pauseAnimation() 暂停播放动画。

• ◼ stopAnimation(clear?: boolean) 停止播放动画，当 clear 为 true 时，清空画布。

• ◼ clear() 清空画布

• ◻ stepToFrame(frame: number, andPlay: boolean = false) 跳转动画的指定帧，andPlay 为 true 时，从该帧开始播放动画。

• ◻ stepToPercentage(percentage: number, andPlay: boolean = false) 跳转动画的指定进度百分比，andPlay 为 true 时，从该帧开始播放动画。

• ◼ async setImage(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) 监听动画播放过程中，当前进度的变化。

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码