javascript - 在 P5.js 中从同一源创建多个 GIF

Question

我正在创建一个游戏，我必须在多个地方使用相同的 gif。我用过this创建和显示 gif 的方法。

但是当我尝试在不同的时间间隔多次使用它时。所有帧保持同步，而不是从下一次开始:我将上面的代码修改为这个:

var open, frame, o1;

function preload() {
  load = loadImage("doorOpen.gif");
}

function setup() {
  createCanvas(0, 0);
  background(0);
}

function draw() {
  open = createImg("doorOpen.gif");
  open.position(0, 0);
  open.size(100,100);

  setTimeout(function(){
    o1 = createImg("doorOpen.gif")
    o1.position(0,150);
    o1.size(100,100);
  }, 1000);
}

我想要的是，当我添加第二个 GIF 时，它会从头开始播放。但取而代之的是；它从第一个 GIF 的位置开始。

Answer 1

好消息，这是可能的。

您正在使用 gif 作为图像源创建新的 html 元素。你的浏览器试图变得聪明并试图节省资源，加载 gif 一次，然后一遍又一遍地显示它。

您可以通过添加“？”来欺骗浏览器认为这是不同的图像以及 url 的随机数。它仍然会加载相同的图像，但它将是唯一的。我在下面展示了如何执行此操作。

另一方面；当像上面那样在绘图函数中调用 createImg() 时，它会每帧添加 2 个图像元素，并会导致 DOM 中出现数千个图像并使浏览器崩溃。我将其移至设置功能。<​​/p>

var open, o1;

function setup() {

  createCanvas(0, 0);
  background(0);

  open = createImg("doorOpen.gif");
  open.position(0, 0);
  open.size(100, 100);

  setTimeout(function() {
    o1 = createImg("doorOpen.gif?" + random());
    o1.position(0, 150);
    o1.size(100, 100);
  }, 800);

}