web端动效 PAG

news2024/12/23 5:29:13

之前写过一篇lottie动效的文章：web端动效 lottie-web 使用，本篇写一下PAG-web的基础使用。

PAG是腾讯开发，支持移动端、桌面端以及Web端的动效工作流解决方案。目标是降低或消除动效相关的研发成本，能够一键将设计师在 AE（Adobe After Effects）中制作的动效内容导出成素材文件，并快速上线应用于几乎所有的主流平台。

安装官方文档

yarn add libpag

vue.config.js 加入以下代码

// ...
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

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

简单的接入示例和 Vue / React / PixiJS 等配置示例，可以点击这里查看。

使用
创建一个组件MyPag/index.vue

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

<script>
import { PAGInit } from 'libpag'

export default {
  data () {
    return {
      pagView: null
    }
  },
  created () {
    this.initPag()
  },
  methods: {
    async initPag () {
      const url = '/static/like.pag' // pag文件放在了静态文件夹下 /public/static
      const PAG = await PAGInit()
      const { PAGFile, PAGView } = PAG

      // 示例 fetch 请求
      const buffer = await fetch(url).then(res => res.arrayBuffer())
      const pagFile = await PAGFile.load(buffer)

      document.getElementById('pag').width = pagFile.width()
      document.getElementById('pag').height = pagFile.height()
      this.pagView = await PAGView.init(pagFile, '#pag')
      this.pagView.setRepeatCount(0)
      this.pagView.play()
    }
  }
}
</script>

<style lang="scss" scoped>
.pag {
  width: 200px;
  height: 200px;
}
</style>

示例中pag文件路径，测试素材下载
在这里插入图片描述
一个基本的pag动效就出来了

结合实例方法，加入简单的鼠标事件：移入播放，移出暂停。查看API文档

<template>
  <div class="lottie" @mouseenter="onMouseenter" @mouseleave="onMouseleave"></div>
</template>

<script>
import lottie from 'lottie-web'

export default {
  props: {
    animationData: {
      type: Object,
      required: true
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    loop: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      lottie: null
    }
  },
  mounted () {
    this.intLottie()
  },
  methods: {
    intLottie () {
      let { animationData, autoplay, loop } = this
      if (!autoplay) {
        loop = false
      }
      this.lottie = lottie.loadAnimation({
        container: this.$el, // 渲染容器
        renderer: 'svg', // 渲染方式
        loop, // 是否循环
        autoplay, // 自动播放
        animationData // lottie json文件
      })
    },
    onMouseenter () {
      if (!this.autoplay) {
        this.lottie.setDirection(1)
        this.lottie.play()
        this.lottie.addEventListener('complete', e => {
          this.lottie.stop()
        })
      }
    },
    onMouseleave () {
      this.lottie.removeEventListener('complete')
      if (!this.autoplay) {
        this.lottie.setDirection(-1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lottie {
  width: 200px;
  height: 200px;
}
</style>