p5.js项目切换标签后返回GIF长时间冻结如何修复

问题根因 #

浏览器对后台不可见标签页会做性能限制：会暂停/降频 requestAnimationFrame（p5.js 的 draw 循环基于该API实现），同时GIF的原生播放也会在后台暂停，切回前台时两者的时间线出现偏差，就会出现GIF冻结与离开时长相等的问题。

可直接落地的修复方案 #

方案1：手动控制GIF帧播放（改动最小，推荐） #

p5.js 加载的GIF支持手动控制帧播放，我们可以关闭GIF的自动播放，每次draw时手动切换下一帧，完全和游戏逻辑帧绑定，不受后台暂停影响。
仅需要修改setup和draw中GIF相关的逻辑：

function setup() {
  createCanvas(1000, 1000);
  img = loadImage("backgwound.png");
  // GIF加载完成后关闭自动播放
  img2 = loadImage("catgif.gif", () => {
    img2.pause();
  });
  x2 = width;
  bing.loop()
}

function draw() {
  // 原有逻辑保持不变
  if (screen == 0) {
    startScreen();
  } else if (screen == 1) {
    gameOn();
  } else if (screen == 2) {
    endScreen();
  }

  let time = frameCount;
  image(img, 0 - time, 0);
  image(bgImg, x1, 2, width, height);
  image(bgImg, x2, 2, width, height);

  x1 -= scrollSpeed;
  x2 -= scrollSpeed;
  if (x1 <= -width) {
    x1 = width;
  }
  if (x2 <= -width) {
    x2 = width;
  }

  scale(0.4, 0.4);
  translate(300, 1855);
  // 绘制前手动切换到GIF下一帧
  img2.nextFrame();
  image(img2, 0, 0);
}

方案2：切后台时暂停整个游戏（适用于需要后台暂停的场景） #

如果希望切换标签页时游戏完全暂停，不会出现切回来后进度变化的情况，可以监听页面可见性事件，页面隐藏时暂停draw循环，显示时恢复：
在代码任意位置新增这段监听逻辑即可：

document.addEventListener('visibilitychange', () => {
  document.hidden ? noLoop() : loop();
})

方案3：拆GIF为逐帧图片手动切换（兼容性最好） #

如果前两个方案存在浏览器兼容问题，可以把GIF拆解为逐帧静态图片，预加载所有帧后手动根据帧计数切换播放，完全不受浏览器GIF播放逻辑限制：

// 示例假设GIF拆解为20帧，命名为cat_frame0.png到cat_frame19.png
let catFrames = [];
let currentFrame = 0;

function preload() {
  // 预加载所有帧
  for(let i = 0; i < 20; i++) {
    catFrames.push(loadImage(`cat_frame${i}.png`))
  }
  bgImg = loadImage("backgwound.png");
  bing = loadSound('catbus theme song.mp3')
}

function draw() {
  // 原有逻辑保持不变
  if (screen == 0) {
    startScreen();
  } else if (screen == 1) {
    gameOn();
  } else if (screen == 2) {
    endScreen();
  }

  let time = frameCount;
  image(img, 0 - time, 0);
  image(bgImg, x1, 2, width, height);
  image(bgImg, x2, 2, width, height);

  x1 -= scrollSpeed;
  x2 -= scrollSpeed;
  if (x1 <= -width) {
    x1 = width;
  }
  if (x2 <= -width) {
    x2 = width;
  }

  scale(0.4, 0.4);
  translate(300, 1855);
  // 每2帧切换一次，可调整分母控制播放速度
  currentFrame = Math.floor(frameCount / 2) % catFrames.length;
  image(catFrames[currentFrame], 0, 0);
}

内容的提问来源于stack exchange，提问作者Izabella Petersen