在 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 中出现数千个图像并导致浏览器崩溃。我把它移到了设置功能中。

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

Create multiple GIFs from the same source in P5.js

javascript

gif

p5.js