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.startAnimation(); // 开始播放动画
    player.startAnimation(); // 开始播放动画
    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动画能够在品牌宣传中起到突出的作用，留下深刻印象。