uniapp中使用svga动画

1、首先什么是svga动画
SVGA（http://svga.io/index.html） 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web。
SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。
更直观的svga动画可以看直播间内老铁给主播刷礼物的特效

这里提供一个SVGA动画预览网站
需要本地svga文件拖入，即可查看动画效果

2、本次开发需求是基于uniapp平台，所以在此记录
uniapp插件市场提供了一个 lime-svga 插件 (https://ext.dcloud.net.cn/plugin?id=8134)
按照插件使用方法，一般推荐使用方法二
使用步骤如下：

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

需要给容器设置高度，不然动画会显示不出来

在 onReady 生命周期里获取svga容器对象

this.$refs.svga.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
	// 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit
    player.setContentMode(() => {
		contentMode: 'Fill' 
	})
    // 开始播放动画，reverse = true 时则反向播放。
    player.startAnimation()
    // 监听动画进度
    player.onPercentage((percentage)=> {
    	// 由于有动画未完成时需要显示其他效果的需求，所以监听动画播放进度
    	// svga动画播放进度大于 70% 时，显示卡牌
		if(percentage*100 > 70) {
			this.svgaShow = false
		}
    })
    // 监听动画完成
    player.onFinished(() => {
        console.log('动画结束')
    })
})

其他属性
Player

• loop=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: Uint8Array | string, forKey: string): Promise<any> 使用图片替换指定元素
• setText(dynamicText: DynamicText, forKey: string) 添加文本到指定元素上
• clearDynamicObjects() 清空所有替换元素。
• onFinished(callback: () => void) 监听动画完成
• onFrame(callback: (frame: number) => void) 监听动画播放过程中，当前帧的变化。
• onPercentage(callback: (percentage: number) => void) 监听动画播放过程中，当前进度的变化。