APNG 在第二次页面刷新后不同步

Question

我有一个通过APNG图像实现的带有动画UI的应用程序。

每个块有 2 个 APNG 图像和一个 PNG 图像：

1. 出现 (APNG)
2. 乒乓
球
3. 静态(PNG)

我需要在第一个动画完成后立即播放第二个动画，并且仅在触摸事件后使 PNG 图像可见。我已经通过setTimeout完成了此操作，但不幸的是，在第二次页面刷新后，浏览器完全忽略了一些动画，其中一些开始抖动，一些在不适当的时刻禁用。

如何解决问题？ 我能捕捉到APNG动画完成的那一刻吗？APNG 图像是否发出任何事件？

要检查问题，请在移动设备上打开应用程序并扫描代码。

Answer 1

浏览器没有任何内置支持将 APNG 视为图像以外的任何内容：无法确定 APNG 何时开始或停止播放。您可以通过将APNG转换为实际的视频文件格式并嵌入<video>图像来解决此问题，因为该API具有用于控制播放的API。唉，似乎没有任何浏览器支持将 APNG 视为视频，因此您需要将其转换为另一种视频格式，例如 WebM。

如果您真的致力于不将 APNG 转换为视频文件格式，则可以通过使用 pngjs 等库来解码 APNG，提取fdAT块，然后手动通过这些提取的帧进行动画处理(APNG 中的每个帧本身就是一个(非动画)PNG)，从而解决了浏览器中的限制。