vue2项目中使用pag格式动图

官方接入指南

vue2官方demo

使用方法如下：

1、安装libpag插件

npm install libpag@^4.1.33

yarn add libpag@^4.1.33

2、配置vue.config.js

configureWebpack: {plugins: [new CopyWebpackPlugin([{from: path.resolve(__dirname, './node_modules/libpag/lib/libpag.wasm'),to: './'}]}]
}

3、在项目public文件夹中创建static目录放置pag相关静态文件

4、 创建 PAG 组件

PAGPlayer.vue

<template><div class="pag-container"><canvas ref="canvas" class="pag-canvas" :style="canvasStyle"></canvas></div>
</template><script>
import { PAGInit } from 'libpag';export default {name: 'PAGPlayer',props: {src: {type: String,default: './pag/boy.pag'},width: {type: [Number, String],default: '100%'},height: {type: [Number, String],default: '100%'},autoPlay: {type: Boolean,default: true},repeat: {type: Boolean,default: true}},data() {return {pagFile: null,pagView: null};},computed: {canvasStyle() {return {width: typeof this.width === 'number' ? `${this.width}px` : this.width,height: typeof this.height === 'number' ? `${this.height}px` : this.height};}},watch: {async src() {await this.loadPAGFile();if (this.autoPlay) {this.play();}}},async mounted() {await this.initPAG();await this.loadPAGFile();if (this.autoPlay) {this.play();}},beforeDestroy() {this.destroy();},methods: {/*** 初始化PAG*/async initPAG() {try {this.pag = await PAGInit({locateFile: file => {console.log('file===', file);if (file === 'libpag.wasm') {return '/static/libpag.wasm';}return file;}});} catch (error) {console.error('Failed to initialize PAG:', error);throw error;}},/*** 加载PAG文件*/async loadPAGFile() {if (this.pagView) {this.pagView.destroy();this.pagView = null;}try {const url = this.src;const response = await fetch(url);const blob = await response.blob();const file = new window.File([blob], url.replace(/(.*\/)*([^.]+)/i, '$2'));this.pagFile = await this.pag.PAGFile.load(file);this.pagView = await this.pag.PAGView.init(this.pagFile, this.$refs.canvas);this.pagView.setRepeatCount(this.repeat ? 0 : 1); // 0表示无限循环，1表示播放一次// 监听播放完成事件this.pagView.addListener('onAnimationEnd', () => {console.log('Animation ended');this.$emit('ended');});this.$emit('loaded');} catch (error) {console.error('Failed to load PAG file:', error);this.$emit('error', error);}},/*** 播放动画*/play() {if (this.pagView) {this.pagView.play();this.$emit('play');}},/*** 暂停动画*/pause() {if (this.pagView) {this.pagView.pause();this.$emit('pause');}},/*** 停止动画*/stop() {if (this.pagView) {this.pagView.stop();this.$emit('stopped');}},/*** 销毁PAG资源*/destroy() {if (this.pagView) {this.pagView.destroy();this.pagView = null;}if (this.pagFile) {this.pagFile.destroy();this.pagFile = null;}},/*** 获取当前播放进度（0-1）*/getProgress() {return this.pagView ? this.pagView.getProgress() : 0;},/*** 设置播放进度（0-1）* @param progress {number} 0-1*/setProgress(progress) {if (this.pagView) {this.pagView.setProgress(progress);}},/*** 获取动画持续时间（秒）*/getDuration() {return this.pagFile ? this.pagFile.duration() / 1000000 : 0;}}
};
</script><style scoped>
.pag-container {position: relative;width: 100%;height: 100%;
}.pag-canvas {width: 100%;height: 100%;display: block;
}
</style>

5、使用 PAG 组件

在需要使用的页面中引入并使用 PAG 组件：

<template><div><div class="controls"><button @click="play">Play</button><button @click="pause">Pause</button><button @click="stop">Stop</button></div><PAGPlayerref="pagPlayer":src="pagUrl":width="400":height="400":auto-play="false":repeat-count="3"@loaded="onPAGLoaded"@error="onPAGError"/></div>
</template><script>
import PAGPlayer from '@/components/PAGPlayer.vue'export default {components: {PAGPlayer},data() {return {pagUrl: 'https://example.com/your-animation.pag', // 替换为你的PAG文件URL}},methods: {play() {this.$refs.pagPlayer.play()},pause() {this.$refs.pagPlayer.pause()},stop() {this.$refs.pagPlayer.stop()},onPAGLoaded(pagFile) {console.log('PAG file loaded:', pagFile)// 可以获取动画信息console.log('Duration:', pagFile.duration())console.log('Width:', pagFile.width())console.log('Height:', pagFile.height())console.log('NumChildren:', pagFile.numChildren())},onPAGError(error) {console.error('PAG error:', error)}}
}
</script><style>
.controls {margin: 20px 0;
}
.controls button {margin-right: 10px;
}
</style>