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(); - 清空所有动态图像和文本

（4）Callback Method

• onFinished(callback: () => void): void; - 动画停止播放时回调
• onFrame(callback: (frame: number): void): void; - 动画播放至某帧后回调
• onPercentage(callback: (percentage: number): void): void; - 动画播放至某进度后回调

（5）SVGA.Parser

SVGA.Parser 用于加载远端或 Base64 动画，并转换成 VideoItem。

跨域的 SVGA 资源需要使用 CORS 协议才能加载成功。

如果你需要加载 Base64 资源，或者 File 资源，这样传递就可以了 load(File) 或 load('data:svga/2.0;base64,xxxxxx')。

5.SVGA动画在前端开发中具有多种用途，

包括但不限于：

1. 用户界面动效： SVGA可以用于创建各种炫酷的用户界面动画，提升用户体验和界面交互。

2. 引导页面： 利用SVGA动画可以设计引人注目的引导页面，引导用户浏览应用的特性和功能。

3. 游戏开发： 在游戏中，SVGA动画可用于制作角色动画、过场动画或特效，增强游戏的视觉吸引力。

4. 广告和营销： SVGA动画能够制作生动的广告素材，吸引用户关注，提高广告的效果。

5. 教育应用： 利用SVGA动画可以创建生动的教育内容，使学习过程更有趣和易于理解。

6. 产品演示： SVGA动画可用于展示产品的特性、功能或使用场景，为产品演示增色添彩。

7. 品牌宣传： 具有吸引力的SVGA动画能够在品牌宣传中起到突出的作用，留下深刻印象。

这篇关于Vue3使用Svgaplayer进行.svga动画的播放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---