1.npm安装
npm install svga --save
yarn add svga
2.在你的Vue组件文件中引入Parser和Player:
import { Parser, Player } from 'svga';
3.svga基本使用(这里还判断了svga频繁点击会出现重叠效果的情况)
- <div>
- <canvas style="width: 250px; height: 250px;" id="svgaT">canvas><br>
- div>
- template>
- <script>
- import { Parser, Player } from 'svga'
-
- export default {
- data() {
- return {
- url: 'https://photo.storage.vvvchat.com/assets/zj/op_1686118482.svga',
- svgaplayer: null,
- svgaparser: null,
- Booleansvga: false, //判断当前是否正在加载中
- }
- },
- created() {
- this.render()
- },
- methods: {
- render() {
- //如果正再加载svga的话 直接return
- if (this.Booleansvga) {
- return
- }
- this.Booleansvga = true //把此变量变为true 防止动画还没有加载完毕 又要新的动画加载
- let svgaURL = this.url //把第一次加载的url地址赋值给svgaURL
- this.svgaparser = new Parser()
- //这里动画加载地址
- this.svgaparser.load(this.url).then((svga) => {
- this.Booleansvga = false //加载完之后 把变量变为false
- if (svgaURL !== this.url) { //判断第一次播放svga地址是否等于当前选择的svga地址
- this.render()
- return
- }
- this.svgaplayer = new Player(document.getElementById('svgaT'))
- this.svgaplayer.mount(svga)
- this.svgaplayer.start() //开始播放动画
- }).catch(err => {
- this.Booleansvga = false //加载完之后 把变量变为false
- console.log(err);
- })
- },
- }
- }
- script>
4.停止播放或者清除svga动画
- this.svgaplayer?.stop(); //停止播放
- this.svgaplayer?.clear(); //清楚当前svga动画
5.结束
6.就这么简单