Vue3使用Svgaplayer进行.svga动画的播放

本文主要是介绍Vue3使用Svgaplayer进行.svga动画的播放，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官网：svgaplayerweb - npm

1.安装

npm i svgaplayerweb --save

yarn进行包管理，所以命令是：

yarn add svgaplayerweb

2.引入

import SVGA from 'svgaplayerweb'

3.使用

<template><div><div :id="'guide' + timeId" class="game-guide"></div></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import SVGA from "svgaplayerweb";
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯一id
const guideFn = () => {// 获取id的dom元素var player = new SVGA.Player(`#guide${timeId.value}`);var parser = new SVGA.Parser();parser.load("/svgas/dj.svga", (videoItem) => {// 你的svga文件路径player.setVideoItem(videoItem);player.startAnimation(); // 开始动画});
};
onMounted(() => {guideFn();
});
</script>
<style scoped long="scss">
.game-guide {position: absolute;bottom: 0;right: 0;width: 150px;height: 150px;z-index: 5;overflow: hidden;pointer-events: none;
}
</style>

4.其他属性

（1）SVGA.Player 用于控制动画的播放和停止

const guideFn = () => {// 获取id的dom元素var player = new SVGA.Player(`#guide${timeId.value}`);var parser = new SVGA.Parser();parser.load("/svgas/dj.svga", (videoItem) => {// 你的svga文件路径player.setVideoItem(videoItem);player.startAnimation(); // 开始播放动画player.loops = 1; // 设置循环次数player.setWrapMode(1); // 设置填充模式player.pauseAnimation(); // 暂停动画player.stopAnimation(); // 停止动画player.stepToFrame(10, true); // 跳转到第10帧并播放});
};

（2）Properties

int loops; - 动画循环次数，默认值为 0，表示无限循环。
BOOL clearsAfterStop; - 默认值为 true，表示当动画结束时，清空画布。
string fillMode; - 默认值为 Forward，可选值 Forward / Backward，当 clearsAfterStop 为 false 时，Forward 表示动画会在结束后停留在最后一帧，Backward 则会在动画结束后停留在第一帧。

Svgaplayer提供了一系列控制方法来管理SVGA动画的播放，包括：

（3）Methods

constructor (canvas); - 传入 #id 或者 CanvasHTMLElement 至第一个参数
startAnimation(reverse: boolean = false); - 从第 0 帧开始播放动画
startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); - 播放 [location, location+length] 指定区间帧动画
pauseAnimation(); - 暂停在当前帧
stopAnimation(); - 停止播放动画，如果 clearsAfterStop === true，将会清空画布
setContentMode(mode: "Fill" | "AspectFill" | "AspectFit"); - 设置动画的拉伸模式
setClipsToBounds(clipsToBounds: boolean); - 如果超出盒子边界，将会进行裁剪
clear(); - 强制清空画布
stepToFrame(frame: int, andPlay: Boolean); - 跳到指定帧，如果 andPlay === true，则在指定帧开始播放动画
stepToPercentage(percentage: float, andPlay: Boolean); - 跳到指定百分比，如果 andPlay === true，则在指定百分比开始播放动画
setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); - 设定动态图像, transform 是可选的, transform 用于变换替换图片
setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - 设定动态文本
clearDynamicObjects(); - 清空所有动态图像和文本