Tengo una animación con fondo transparente y un lienzo HTML.
Antes de agregar un objeto al lienzo, se debe reproducir la animación.
La fuente de animación es un archivo Flash, también hay una exportación HTML/JS (CreateJS) y un GIF animado disponible.
El lienzo usa Fabric.js ejecutándose dentro de una aplicación React.
Mi pregunta es la siguiente:
¿Cuál es la forma recomendada de implementar la animación en el caso de uso descrito?
Por el momento, mi mejor enfoque sería tratar de integrar la exportación CreateJS en la aplicación React y "superponer" el lienzo Fabric.JS con el lienzo CreateJS mientras se reproduce la animación. Esta solución podría funcionar y me parece complicada e inflada, ya que integraría otra biblioteca de lienzos (CreateJS además de Fabric.js) y ambas deben sincronizarse en términos de sincronización/reproducción de la animación correctamente.
Aquí hay una pregunta similar sin respuesta GIF animado en Fabric.js Canvas
Solo conozco una forma de agregar imágenes con fabric.js. Primero carga sus imágenes cuando la página se está cargando y luego las muestra en el lienzo. Pero por lo que he experimentado, fabric.js establece muchas funciones en cada elemento, por lo que se vuelve difícil de cargar si desea mostrar miles de imágenes juntas.
var canvas = new fabric.Canvas('c'); var imgElement = document.getElementById('my-image'); var imgInstance = new fabric.Image(imgElement, { left: 100, top: 100, angle: 30, opacity: 0.85 }); canvas.add(imgInstance);