节点 - 为什么我的 gif 在使用 GifEncoder 时这么慢

Question

我想用 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 过高时，他们有一个内部计算

任何人都可以在这里帮助我或给我建议该怎么做吗？

Answer 1

看来，我已经有了解决办法。将延迟设置为：

encoder.setDelay(30); // frame delay in ms

已经平滑了 gif：

我的建议。睡一晚，从 清新的头脑开始

节点 - 为什么我的 gif 在使用 GifEncoder 时这么慢

Node - Why is my gif so slow when using GifEncoder

javascript

node.js

gif

animated-gif