前端pag格式动画使用

官网地址https://pag.art/docs/sdk-web.html
前端项目使用

• utils文件封装

// pag文件(支持本地相对路径)， canvas 的id名，播放次数
export const initPag = async (url, id, num=0) => {// 实例化 PAGconst PAG = await window.libpag.PAGInit()// 获取 PAG 素材数据// https://pag.art/file/like.pagconst 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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！