PAG在大屏可视化的实践

前言：大屏可视化在许多项目中都会用到，它能够直观动态的展示数据统计，数据分析的结果，以及各类元素的展示，PAG是腾讯公司自主研发的一套完整动画工作流解决方案，解决了复杂的视频编辑场景下动画渲染问题，同时又覆盖了UI动画和直播场景，借助PAG这个优势可以更好的解决前端复杂的动态效果展示问题。本文介绍PAG的使用和展示问题。

1.下载PAG的相关依赖库

npm/pnpm install libpag 或者 yarn add libpag

2.在应用组件中引入初始化方法

import { PAGInit } from "libpag";

3.定义canvas Dom节点

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

4.在生命周期函数中进行业务逻辑处理

onMounted(() => {
  PAGInit().then((PAG) => {
 // 引入PAG文件地址
    const url = "/plugins/6.pag";
    fetch(url)
       //转成blob类型
      .then((response) => 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") as any).width = pagFile.width();
        (document.getElementById("pag") as any).height = pagFile.height();
        //文件预览显示
        const pagView = await PAG.PAGView.init(pagFile, "#pag");
        pagView?.setRepeatCount(0);
        //文件动效播放展示
        await pagView?.play();
      });
  });
});

效果展示

总结：有了PAG的支持，可以有效解决前端动效的复杂问题，帮助我们轻松应用于大屏数字化应用以及各种动态化展示，对用户的体验和产品的实现都有很大的作用。