JavaScript交互猫组件中Animated GIF切换后静态化问题排查

问题根源 #

你遇到的GIF静态问题，本质是Chrome浏览器的缓存机制导致的：在requestAnimationFrame的循环中，每帧都重复设置相同的GIF图片路径作为src，浏览器会直接复用缓存中的图片实例，但不会重新触发GIF的动画播放，最终导致GIF停在第一帧变成静态图。

具体解决方案 #

1. 避免重复设置相同的GIF路径

在状态中跟踪当前猫咪显示的GIF类型，只有当需要切换到不同的GIF时，才更新src属性，避免每帧重复赋值。

修改步骤：

• 在state中新增currentCatGif字段，初始值设为"cat-sleeping.gif"
• 在循环中仅当目标GIF与当前显示的GIF不一致时，才更新图片源

修改后的代码片段：

function loop() {
  const { pointerEvent, pointerStatic, catActive, currentCatGif } = state;
  const { cat, cursor } = settings;

  // Calculate distance between cat and pointer
  const distance = Math.sqrt(
    Math.pow(pointerEvent.x - cat.element.offsetLeft, 2) +
      Math.pow(pointerEvent.y - cat.element.offsetTop, 2)
  );

  // Normalize the distance
  const distanceNorm = scale(distance, 0, 1000);

  // Activate the cat after the pointer gets close enough
  if (distanceNorm < 0.1) {
    updateState({ catActive: true });
  } else {
    updateState({ catActive: false });
  }

  // Flip the cursor left or right depending on the direction of movement
  if (pointerEvent.movementX < 0) {
    cursor.element.style.transform = "scaleX(-1)";
  } else {
    cursor.element.style.transform = "scaleX(1)";
  }

  // Make the cat turn from left to right when the pointer is moving
  if (pointerEvent.x < cat.element.offsetLeft + cat.width / 2) {
    cat.element.style.transform = "scaleX(-1)";
  } else {
    cat.element.style.transform = "scaleX(1)";
  }

  // 处理猫咪状态与GIF切换逻辑
  if (catActive) {
    // 仅当当前不是行走GIF时才切换
    if (currentCatGif !== "cat-walk.gif") {
      cat.element.src = "cat-walk.gif";
      updateState({ currentCatGif: "cat-walk.gif" });
    }
    // 追逐逻辑保持不变
    cat.element.style.left = `${toAbsolute(
      distanceNorm,
      cat.element.offsetLeft,
      pointerEvent.x - 80
    )}px`;
    cat.element.style.top = `${toAbsolute(
      distanceNorm,
      cat.element.offsetTop,
      pointerEvent.y - 35
    )}px`;
  } else {
    // 根据距离切换睡觉/坐起GIF（补充原有缺失的逻辑）
    if (distanceNorm < 0.3 && currentCatGif !== "cat-sitting.gif") {
      cat.element.src = "cat-sitting.gif";
      updateState({ currentCatGif: "cat-sitting.gif" });
    } else if (distanceNorm >= 0.3 && currentCatGif !== "cat-sleeping.gif") {
      cat.element.src = "cat-sleeping.gif";
      updateState({ currentCatGif: "cat-sleeping.gif" });
    }
  }

  window.requestAnimationFrame(loop);
}

2. 强制GIF重新播放的备用方案

如果需要在某些场景下重新播放同一个GIF（比如猫咪重新开始追逐时），可以通过添加随机查询参数的方式，让浏览器认为是新资源，从而重新加载并播放动画：

// 仅在需要重新播放时使用
cat.element.src = `cat-walk.gif?${Math.random()}`;

注意：这种方式会绕过缓存，频繁使用可能影响性能，仅在必要时采用。

额外优化建议 #

• 确保所有GIF图片的尺寸一致，避免切换时出现布局跳动
• 可以给猫咪图片添加image-rendering: pixelated样式（如果是像素风格猫咪），保证缩放时的显示效果

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