Disculpe el título de la pregunta, pero realmente no sé cómo resumir la pregunta.

Estoy trabajando en un proyecto de Electron donde usamos Animejs para crear una presentación animada. Es principalmente solo texto que aparece en la pantalla al desvanecerse, traducir Y, traducir X, etc. Y luego, después de unos segundos, el texto se anima y el nuevo texto se anima.

El objetivo principal de la aplicación es que el usuario pueda guardar la presentación como un video. Así que estamos usando el evento Electrons on paint para capturar cada cuadro renderizado. Y esto funciona bien. Pero no creo que sea la forma correcta, ya que la velocidad de fotogramas del navegador no es constante y solo activa el evento "pintar" cuando hay movimiento, por lo que hemos tenido que encontrar una forma de usar el último fotograma escrito para completar los huecos donde faltan fotogramas. Esto también funciona bien, pero no es perfecto y tiene algunos errores.

Creo que la solución óptima sería tener una matriz de objetos que contenga las coordenadas predeterminadas de cada elemento para cada fotograma. Luego puedo recorrer la matriz/los marcos y usar js para colocar cada elemento correctamente y luego escribir ese marco en el disco como un mapa de bits. Así que no más marcos perdidos.

Como ejemplo, animar dos líneas de texto de izquierda a derecha podría verse así (solo dos cuadros por brevedad):

 const frames = [ { coordinates: [ { elId: "text-1", left: 50, // px top: 150, // px }, { elId: "text-2", left: 50, // px top: 180, // px }, ], }, { coordinates: [ { elId: "text-1", left: 51, // px top: 150, // px }, { elId: "text-2", left: 51, // px top: 180, // px }, ], },

];

Entonces mi pregunta es, ¿alguien sabe de una biblioteca de animación que nos permita escribir las animaciones en js como lo hace Animejs o Greensock pero en lugar de ejecutar las animaciones en tiempo real, la biblioteca escupe una serie de objetos similares al ejemplo anterior?