Quiero renderizar un Gif con GifEncoder ( versión anterior ), pero desafortunadamente la salida del gif es mucho más lenta o, por así decirlo, se retrasa. Este es mi código:

 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); }

esta es la salida

Tomé el ejemplo de este violín , donde puedes ver cuán suave debe verse la pelota.

Lo que intenté hasta ahora sin éxito,

• No crear una transmisión, cuando se usa GifEncoder
• Recopilar cx en una matriz y usar GifEncoder después, pero parece que ctx es un objeto de referencia y no pude encontrar la manera de copiarlo.
• Jugando con P5 con la esperanza, tienen un cálculo interno, cuando el deltaTime es demasiado alto entre los fotogramas.

¿Alguien puede ayudarme aquí o darme un consejo sobre qué hacer?