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，然后一遍又一遍显示。

您可以通过添加“？”来欺骗浏览器以使其认为是另一张图片。网址的随机数。它仍将加载相同的图像，但将是唯一的。我已经在下面显示了如何执行此操作。

另一方面；当像上面所做的那样在draw函数中调用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);

}

从P5.js中的同一来源创建多个GIF

1 个答案: