以 p5js 为单位的动画 PNG 帧速率

Question

我尝试了带有p5的动画PNG，它似乎有效：

https://editor.p5js.org/dirkk0/sketches/q4Y5HzOYC

有没有办法控制帧速率？

Answer 1

P5 有一个frameRate()功能，但这会改变画布的帧速率而不是你的 gif 的帧率，所以我假设你不希望这样。

我认为看看 p5.play 库是个好主意 - 它具有您可以使用的大量功能，包括一个 loadAnimation((，它接收您的 gif 并创建一个动画对象 - 您可以使用animation.frameDelay更改其帧速率。

所以你的示例 - 使用 p5.play 库 - 看起来像这样：

var anim;
var sprite;
function preload() {
// loads all the image files
anim = loadAnimation('test.png');
}
function setup() {
createCanvas(600, 600);
// change how many frames (of draw loop) each animation frame is
// visible for. bigger #s = slower speed
anim.frameDelay = 2;
// create a sprite from a single image
sprite = createSprite(300, 150);
sprite.addAnimation("test", anim);
}
function draw() { 
background(220);
drawSprites();
}

这是一个非常好的例子 https://editor.p5js.org/kjhollen/sketches/BJ1a_DIkM