p5.js 图像延迟() 方法

p5.js 中 p5.Image 的delay() 方法用于改变 GIF 动画中每一帧之间的延迟。该值可以以毫秒为单位设置，较高的值意味着 GIF 将在较长时间后显示其下一帧。

可选的第二个参数可用于指定需要设置新延迟值的帧的索引。如果未指定任何内容，所有帧都将获得新的延迟值。

句法：

resize( d, index )

参数：此函数接受两个参数，如上所述和如下所述。

• d：这是一个数字，指定每帧之间的延迟量（以毫秒为单位）。
• index：它是一个数字，指定必须修改的帧的索引。它是一个可选参数。

下面的例子说明了 p5.js 中的delay() 方法：

示例 1：

Javascript

function preload() {
    faster_gif = loadImage("sample-gif.gif");
    slower_gif = loadImage("sample-gif.gif");
}
  
function setup() {
    createCanvas(500, 300);
    textSize(20);
  
    text('Faster GIF', 20, 20);
    text('Slower GIF', 20, 180);
  
    // Speed up the GIF with a delay
    // of 10 milliseconds between
    // each frame
    faster_gif.delay(10);
  
    // Slow down the GIF with a delay
    // of 100 milliseconds between
    // each frame
    slower_gif.delay(100);
}
  
function draw() {
    image(faster_gif, 20, 40, 200, 100);
    image(slower_gif, 20, 200, 200, 100);
}

输出：

示例 2：

Javascript

function preload() {
    normal_gif = loadImage("sample-gif.gif");
    modified_gif = loadImage("sample-gif.gif");
}
  
function setup() {
    createCanvas(500, 300);
    textSize(20);
  
    text('Normal GIF', 20, 20);
    text('Modified GIF', 20, 180);
  
    // Modify the GIF with the delay
    // applied to the 100th frame
    modified_gif.delay(4000, 100);
}
  
function draw() {
    image(normal_gif, 20, 40, 200, 100);
    image(modified_gif, 20, 200, 200, 100);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5.Image/delay