Estoy tratando de encontrar una manera de crear una animación basada en un conjunto de capas PNG, tal vez pueda animarlas a través de CSS o alguna biblioteca, y luego, en base a eso, obtener un GIF codificado en base64. ¿Hay alguna biblioteca que haga esto?
Mi animación debe ser bastante simple, imagínese como una pila/pila vertical de elementos, que va desde la parte superior (fuera de la imagen), y la caída hasta una cierta posición inferior para que terminen apilados tocándose unos a otros emulando algo de gravedad. Ahora, necesito que esto sea dinámico ya que los elementos que se apilarán son diferentes y también pueden estar en un orden diferente.
Ya estoy manejando esto, pero me preguntaba acerca de alguna biblioteca de Javascript que haga esta conversión y me permita animar cada capa también.
Para un proyecto antiguo, utilicé una biblioteca llamada "merge-images" de Lookchilds . Pero esto es solo para que los PNG normales se fusionen en un solo PNG. Y está utilizando HTML Canvas como medio para procesar todo esto.
Cualquier ayuda o sugerencia sería muy apreciada :)
Simplemente agregue un contenedor <div> con sus dimensiones, luego agregue sus imágenes con posicionamiento absoluto para que puedan superponerse entre sí y colocarlas correctamente. Puede ajustar el orden de las capas con z-index o translateZ()
Si tiene un tipo de secuencia de imágenes, puede usar una estructura similar a esta:
<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 0ms"> <img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 5ms"> <img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 10ms"> <img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 15ms"> .anim-img { animation: anim; animation-delay: var(--anim-delay-offset); } @keyframes anim { from { opacity: 1; } to { opacity: 0; } }(Vi este truco en uno de los videos de Fireship)