节点 - 为什么我的 gif 在使用 GifEncoder 时这么慢
Node - Why is my gif so slow when using GifEncoder
我想用 GifEncoder (older version) 渲染一个 Gif,但不幸的是 gif 输出要慢得多,或者说,它滞后了。这是我的代码:
import GIFEncoder from "gif-encoder-2";
import fs from "fs";
import pkg from "canvas";
const { createCanvas } = pkg;
let frame = 0;
const size = 200;
const fr = 60; //starting FPS
const encoder = new GIFEncoder(size, size);
encoder
.createReadStream()
.pipe(fs.createWriteStream("my.gif"));
encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(0); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.
var canvas = createCanvas(size, size),
cw = canvas.width,
ch = canvas.height,
cx = null,
fps = 60,
bX = 30,
bY = 30,
mX = 10,
mY = 20,
interval = null;
function gameLoop() {
cx.clearRect(0, 0, cw, cw);
cx.beginPath();
cx.fillStyle = "red";
cx.arc(bX, bY, 20, 0, Math.PI * 360);
cx.fill();
if (bX >= cw || bX <= 0) {
mX *= -1;
}
if (bY >= ch || bY <= 0) {
mY *= -1;
}
bX += mX;
bY += mY;
encoder.addFrame(cx);
console.log(frame);
if (frame > 60) {
clearInterval(interval);
encoder.finish();
}
++frame;
}
if (typeof canvas.getContext !== undefined) {
cx = canvas.getContext("2d");
interval = setInterval(gameLoop, 1000 / fps);
}
这是输出
我从这个 fiddle 中拿了例子,你可以看到,球看起来应该有多光滑。
到目前为止我试过什么都没有成功,
- 使用 GifEncoder 时未创建流
- 将
cx
收集到一个数组中,然后使用 GifEncoder,但似乎 ctx
是一个引用对象,我找不到如何复制它的方法
- 满怀希望地玩 P5,当帧之间的 deltaTime 过高时,他们有一个内部计算
任何人都可以在这里帮助我或给我建议该怎么做吗?
看来,我已经有了解决办法。将延迟设置为:
encoder.setDelay(30); // frame delay in ms
已经平滑了 gif:
我的建议。睡一晚,从 清新的头脑开始
我想用 GifEncoder (older version) 渲染一个 Gif,但不幸的是 gif 输出要慢得多,或者说,它滞后了。这是我的代码:
import GIFEncoder from "gif-encoder-2";
import fs from "fs";
import pkg from "canvas";
const { createCanvas } = pkg;
let frame = 0;
const size = 200;
const fr = 60; //starting FPS
const encoder = new GIFEncoder(size, size);
encoder
.createReadStream()
.pipe(fs.createWriteStream("my.gif"));
encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(0); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.
var canvas = createCanvas(size, size),
cw = canvas.width,
ch = canvas.height,
cx = null,
fps = 60,
bX = 30,
bY = 30,
mX = 10,
mY = 20,
interval = null;
function gameLoop() {
cx.clearRect(0, 0, cw, cw);
cx.beginPath();
cx.fillStyle = "red";
cx.arc(bX, bY, 20, 0, Math.PI * 360);
cx.fill();
if (bX >= cw || bX <= 0) {
mX *= -1;
}
if (bY >= ch || bY <= 0) {
mY *= -1;
}
bX += mX;
bY += mY;
encoder.addFrame(cx);
console.log(frame);
if (frame > 60) {
clearInterval(interval);
encoder.finish();
}
++frame;
}
if (typeof canvas.getContext !== undefined) {
cx = canvas.getContext("2d");
interval = setInterval(gameLoop, 1000 / fps);
}
这是输出
我从这个 fiddle 中拿了例子,你可以看到,球看起来应该有多光滑。
到目前为止我试过什么都没有成功,
- 使用 GifEncoder 时未创建流
- 将
cx
收集到一个数组中,然后使用 GifEncoder,但似乎ctx
是一个引用对象,我找不到如何复制它的方法 - 满怀希望地玩 P5,当帧之间的 deltaTime 过高时,他们有一个内部计算
任何人都可以在这里帮助我或给我建议该怎么做吗?
看来,我已经有了解决办法。将延迟设置为:
encoder.setDelay(30); // frame delay in ms
已经平滑了 gif:
我的建议。睡一晚,从 清新的头脑开始