0

I have an app with an animated UI realised via APNG images.

Each block has 2 APNG images and one PNG one:

  1. Appearing (APNG)
  2. PingPong (APNG)
  3. Static (PNG)

I need to play the second animation right after the first one is finished and only make visible the PNG image after a touch event. I've done it via setTimeout but, unfortunately, after second page refresh a browser completely ignores some animations, some of them start jittering, some disable in an inappropriate moment.

How can I fix the problem? And can I catch the moment when APNG animation has finished? Do APNG images emit any events?

To check the problem, open the app on mobile device and scan the code.

smitop
  • 4,770
  • 2
  • 20
  • 53
Rihards Okmanis
  • 3
  • 2

1 Answers1

0

Browsers don't have any built-in support for treating APNGs as anything other than an image: there is no way to determine when an APNG has started or stopped playing. You could probably fix the issue by just converting the APNGs to an actual video file format, and embedding the images with <video> instead, since that has an API for controlling playback. Alas, it doesn't seem that any browsers support treating APNGs as video so you'll need to convert it to another video format, such as WebM.

If you are really committed to not converting your APNGs to a video file format, you could work around the limitation in browsers by using a library such as pngjs to decode the APNG, extracting the fdAT chunks, and then manually animating through those extracted frames (each frame in an APNG is itself a (non-animated) PNG).

smitop
  • 4,770
  • 2
  • 20
  • 53