Tengo una aplicación con una interfaz de usuario animada realizada a través de imágenes APNG.
Cada bloque tiene 2 imágenes APNG y una PNG:
Necesito reproducir la segunda animación justo después de que termine la primera y solo hacer visible la imagen PNG después de un evento táctil. Lo hice a través setTimeout pero, desafortunadamente, después de actualizar la segunda página, un navegador ignora por completo algunas animaciones, algunas de ellas comienzan a temblar, algunas se desactivan en un momento inapropiado.
¿Cómo puedo solucionar el problema? ¿Y puedo ver el momento en que la animación APNG ha terminado? ¿Las imágenes APNG emiten algún evento?
Para verificar el problema, abra la aplicación en el dispositivo móvil y escanee el código .
Los navegadores no tienen ningún soporte incorporado para tratar los APNG como algo más que una imagen: no hay forma de determinar cuándo un APNG ha comenzado o dejado de reproducirse. Probablemente podría solucionar el problema simplemente convirtiendo los APNG a un formato de archivo de video real e incrustando las imágenes con <video> en su lugar, ya que tiene una API para controlar la reproducción . Por desgracia, no parece que ningún navegador admita el tratamiento de APNG como video, por lo que deberá convertirlo a otro formato de video, como WebM.
Si está realmente comprometido a no convertir sus APNG a un formato de archivo de video, puede evitar la limitación en los navegadores usando una biblioteca como pngjs para decodificar el APNG, extrayendo los fragmentos de fdAT y luego animando manualmente a través de esos marcos extraídos ( cada cuadro en un APNG es en sí mismo un PNG (no animado).
