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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。