web端动效 PAG

之前写过一篇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/staticconst 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 } = thisif (!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>