Pag格式在vue3中的简单使用方法

目前前端使用pag格式的方法比较少， 在这里我来简单实现一下pag格式在vue3中的使用方式。

第一步  先下载啦

npm i libpag

来对pag文件安装依赖

其次我们在自己想要引入的vue页面进行引入

<script setup>
import { ref, computed, watchEffect, nextTick } from 'vue';
import { PAGInit } from 'libpag';
 
PAGInit().then((PAG) => {
//此处特别要注意一点，你得看你的文件路径是否能够获取到你想要的pag格式文件，如果不行就用../的形式
//一层一层获取，目前在我的操作来看他目前貌似用不了 @/assets/XXX.pag的形式获取到想要的图片路径
//大家可以自行尝试看能否可以获取到对应的pag图片路径
  const url = './like.pag';  
  fetch(url)
    .then((response) => response.blob())
    .then(async (blob) => {
      const file = new window.File([blob], url.replace(/(.*\/)*([^.]+)/i, '$2'));
      const pagFile = await PAG.PAGFile.load(file);
      document.getElementById('pag').width = pagFile.width();
      document.getElementById('pag').height = pagFile.height();
      const pagView = await PAG.PAGView.init(pagFile, '#pag');
      pagView.setRepeatCount(0);
      await pagView.play();
    });
});
 
<script>
<template>
  <div> 
     <canvas class="canvas" id="pag"></canvas>
 </div>
<template>
 

到这一步 的时候  就会报错了

它说错误:PAGInit失败!请检查。wasm文件路径是否有效。

这种情况怎么解决呢   我们需要下载个webpack的插件

npm i copy-webpack-plugin

然后引入一下 

const CopyPlugin = require("copy-webpack-plugin");


const webpackPlugins = [
  new NodePolyfillPlugin(),
  new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/),

  new CopyPlugin({
    patterns: [
      {
        from: path.resolve(__dirname, "./node_modules/libpag/lib/libpag.wasm"),
        to: "./common/js",
      },
    ],
  }),
];

这是一个webpackcopy的插件  意思就是吧他的路径拷贝到我们打包后的文件里  这样就不会提示文件找不到了  就可以正常使用了！

ps：

 pagView.setRepeatCount(0);

1. 动画播放次数的设置

   • 默认值：repeatCount属性的默认值是1，这意味着动画只会播放一次。
   • 无限播放：如果将repeatCount设置为0或者负数，动画将会无限次播放。

2. 动画的控制方法

   • 播放动画：play方法用于从当前位置开始播放动画。如果动画已经在播放中，再次调用play方法不会有任何效果。
   • 暂停动画：pause方法用于在当前位置取消动画。调用play方法可以从上次暂停的位置恢复动画播放。
   • 停止动画：stop方法同样用于在当前位置取消动画，目前其效果与pause方法相同。

综上所述，pagView.setRepeatCount(0)这行代码的作用是将动画的重复次数设置为无限，使得动画可以不断地循环播放。在使用PAGView时，开发者可以通过调整repeatCount属性以及其他相关方法和属性来精细控制动画的播放行为。同时，需要注意PAGView在移动端应用中的内存占用问题，尤其是在处理大型动画或长时间播放时，可能需要对内存使用进行优化。