vue引入svga

最新推荐文章于 2024-03-12 17:07:42 发布

m0_61096502

最新推荐文章于 2024-03-12 17:07:42 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61096502/article/details/128011561

版权

该博客介绍了如何在Vue项目中利用SVGAPlayerWeb库来安装和播放SVG动画。首先，通过npm安装svgaplayerweb并将其保存到依赖中。然后，在Vue组件的模板中创建一个canvas元素，并在methods中定义initMachineSVGA方法加载和播放SVG动画。动画文件需放置在public文件夹下。

摘要由CSDN通过智能技术生成

安装依赖

// 安装 => svgaplayerweb
npm install svgaplayerweb --save

引入svga的页面

<template>
    <div>
        <div id="demoCanvas" ref="demoCanvas"></div>
    </div>
</template>

export default {
    methods: {
        initMachineSVGA() {
          this.player = new SVGA.Player('#spraying');
          let parser = new SVGA.Parser('#spraying');
          let _that = this;
          parser.load('./electric.svga', function (videoItem) {
            _that.player.setVideoItem(videoItem);
            _that.player.startAnimation(); // 开始动画
            // _that.player.pauseAnimation(); // 结束动画
          });
        },
    },
    mounted() {
        // 调用方法
        this.initMachineSVGA()
    }
}

注: svga必须得放在vue文件中的public文件夹下