javascript - APNG 在第二个页面刷新后不同步

Question

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

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

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

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

我该如何解决这个问题？我可以捕捉到 APNG 动画完成的那一刻吗？APNG 图像会发出任何事件吗？

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

标签： javascriptanimationbrowserpngapng

Answer 1

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

如果您真的致力于不将 APNG 转换为视频文件格式，则可以通过使用pngjs之fdAT类的库来解码 APNG、提取块，然后通过这些提取的帧手动制作动画（每个APNG 中的帧本身就是（非动画）PNG）。