前端pag格式动画使用
前端pag格式动画使用方法封装
·
官网地址https://pag.art/docs/sdk-web.html
前端项目使用
- utils文件封装
// pag文件(支持本地相对路径), canvas 的id名,播放次数
export const initPag = async (url, id, num=0) => {
// 实例化 PAG
const PAG = await window.libpag.PAGInit()
// 获取 PAG 素材数据
// https://pag.art/file/like.pag
const buffer = await fetch(url).then((response) => {
return response.arrayBuffer()
}
)
// 加载 PAG 素材为 PAGFile 对象
const pagFile = await PAG.PAGFile.load(buffer)
// 将画布尺寸设置为 PAGFile的尺寸
const canvas = document.getElementById(id)
canvas.width = pagFile.width()
canvas.height = pagFile.height()
// 实例化 PAGView 对象
const pagView = await PAG.PAGView.init(pagFile, canvas)
// 循环播放
pagView.setRepeatCount(num)
await pagView.play()
}
- public 的index.html页面引入
<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>
- 项目中使用
<template>
<canvas id="pag"></canvas>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { initPag } from '@/utils/utils'
onMounted(() => {
initPag('https://www.mustake.net/loading.pag', 'pag')
})
</script>
<style>
#pag {
width: 200px;
height: 200px;
position: fixed;
bottom: 150px;
left: 50%;
transform: translateX(-50%);
z-index: 999999999;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)