p5.js Image delay()用法及代码示例

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

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js Image delay() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。