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

Question

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

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

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

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

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

要检查问题，请在移动设备上打开the app并扫描the code。

Answer 1

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

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