Vue中使用lottie和pag实现复杂复杂动效Vue中使用lottie和pag实现复杂复杂动效，这里的动效，相对来说都

Lottie这个方案比较成熟，用的多一些
Pag是腾讯做的，使用了wasm，相对比较新

Lottie

npm install lottie-web

<template>
    <div id="lottie"></div>
</template>

<script setup lang="ts">
import animData from './imgs/footerAnimationData.json'

const lottieInit = () => {
  animation = lottie.loadAnimation({
    animationData: animData,
    loop: false,
    autoplay: true,
    renderer: 'svg',
    container: document.getElementById('lottie'),
  })
}

onMounted(() => {
  lottieInit()
})
</script>

Pag

Vue3中Pag的使用可以参考这个样例

代码实现

<div>
  <canvas class="canvas" id="pag"></canvas>
</div>

import { PAGInit } from 'libpag'

const pagRender = () => {
  PAGInit().then((PAG) => {
    const url = './wave.pag' // 注意动效文件的存放位置
    fetch(url)
      .then((response) => {
        return 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()
      })
      .catch((err) => {
        console.error(err)
      })
  })
}

onMounted(() => {
  pagRender()
})

vite.config.js配置

import copy from 'rollup-plugin-copy'

export default defineConfig({
import copy from 'rollup-plugin-copy'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    copy({
      targets: [
        { src: './node_modules/libpag/lib/libpag.wasm', dest: process.env.NODE_ENV === 'production' ? 'dist/' : 'public/' },
      ],
      hook: process.env.NODE_ENV === 'production' ? 'writeBundle' : "buildStart",
    }),
  ],
  base: './',
});

pag动效文件需要和wasm文件放到同一目录下，否则读取不到