动画卡顿，把动画丢到你们官方都没得这个问题 #3246

442627268 · 2026-01-30T11:14:47Z

442627268
Jan 30, 2026

这个是完整代码
<!doctype html>

<title>PAG 动画循环播放</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } </style> <script type="module" src="https://cdn.jsdelivr.net/npm/libpag@4.5/lib/libpag.umd.min.js"></script> <script> // 1. 定义动画配置 const pagConfig = { // 动画列表（远程 URL） animationList: ["https://res-media.cshimedia.com/cheese-fox/image/chat/不开心说话/entp4_bmp.pag"], container: document.getElementById("pag"), pagPlayer: null, // PAG 播放器实例 playMode: "sequence", // 默认顺序播放：sequence（顺序）/ random（随机） pagView: null, // 保存PAGView实例 };

  // 4. 加载并播放 PAG 动画
  async function loadAndPlayPag(url) {
    if (!url) return;
    try {
      // 实例化 PAG
      const PAG = await window.libpag.PAGInit();
      // 获取 PAG 素材数据
      const response = await fetch(url);
      if (!response.ok) throw new Error(`请求失败: ${response.status}`);
      const buffer = await response.arrayBuffer();

      // 加载 PAG 素材为 PAGFile 对象
      const pagFile = await PAG.PAGFile.load(buffer);
      const canvas = pagConfig.container;
      const styleDeclaration = window.getComputedStyle(pagConfig.container, null);
      canvas.width = Number(styleDeclaration.width.replace("px", "")) * window.devicePixelRatio;
      canvas.height = Number(styleDeclaration.height.replace("px", "")) * window.devicePixelRatio;
      // 实例化 PAGView 对象
      const pagView = await PAG.PAGView.init(pagFile, canvas, {
        useScale: false, // 禁止自动缩放，手动控制尺寸更高效
        firstFrame: false, // 不强制渲染第一帧，减少初始化阻塞
      });
      pagView.setRepeatCount(0);
      // 播放 PAGView
      await pagView.play();
    } catch (error) {
      console.error("播放失败:", error);
      pagConfig.isPlaying = false;
    }
  }

  // 7. 页面加载完成后初始化
  window.addEventListener("load", () => {
    // 确保 DOM 和 SDK 都加载完成后，默认播放第一个动画
    setTimeout(() => {
      loadAndPlayPag(pagConfig.animationList[0]);
    }, 500);
  });
</script>

jinwuwu001 · 2026-02-25T02:57:48Z

jinwuwu001
Feb 25, 2026
Maintainer

把动画丢到你们官方都没得这个问题 --> 是指官网 demo 播放 pag 文件没出现卡顿吗，那对比官网 demo 排查下用法是否有问题

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

动画卡顿，把动画丢到你们官方都没得这个问题 #3246

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

动画卡顿，把动画丢到你们官方都没得这个问题 #3246

Uh oh!

442627268 Jan 30, 2026

Replies: 1 comment

Uh oh!

jinwuwu001 Feb 25, 2026 Maintainer

442627268
Jan 30, 2026

jinwuwu001
Feb 25, 2026
Maintainer