在公司大部分是实现动画,今天分享一个特别好用的工具–SVGA
1.全局安装SVGA
npm install svgaplayerweb --save
复制代码
2.在使用时引入安装包
import SVGA from 'svgaplayerweb';
复制代码
3.设置Dom节点
<div id="demoCanvas" ></div>
复制代码
4.具体使用:
const svgUrl = '//yun.tuisnake.com/h5-mami/pluginAct/takePack1/cai1.svga';
const player = new SVGA.Player('#demoCanvas');
const parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+,那么必须把同样的选择器传给 Parser。
function animationInit() {
parser.load(svgUrl, function(videoItem) {
player.loops = 1; 设置循环播放次数是 1
player.setVideoItem(videoItem);
player.stepToFrame(0, true); // 从指定帧开始播放动画
player.onFrame((i) => {
console.log(i); //。这里输入的是动画的帧数
if (i >= 24 && i < 26) {
console.log('111');
} else if (i >= 70) {
player.clear();
}
});
});
};
复制代码
5.常用参数说明
SVGA.Player 用于控制动画的播放和停止
SVGA.Parser 用于加载远端或 Base64 动画,并转换成 VideoItem。
loops; - 动画循环次数,默认值为 0,表示无限循环。
stepToFrame(frame: int, andPlay: Boolean); - 跳到指定帧,如果 andPlay === true,则在指定帧开始播放动画 clear(); - 强制清空画布
具体参数参考:https://github.com/yyued/SVGAPlayer-Web
End...