第二页刷新后 APNG 不同步
APNG gets out of sync after second page refresh
我有一个带有动画的应用程序 UI 通过 APNG 图像实现。
每个块有 2 个 APNG 图片和一个 PNG 图片：
- 出现 (APNG)
- 乒乓 (APNG)
- 静态 (PNG)
我需要在第一个动画结束后立即播放第二个动画，并且仅在触摸事件后才使 PNG 图像可见。我已经通过 setTimeout 完成了，但不幸的是，在刷新第二页后，浏览器完全忽略了一些动画，其中一些开始抖动，一些在不适当的时刻禁用。
我该如何解决这个问题？
我可以捕捉到 APNG 动画结束的时刻吗？ APNG 图像会发出任何事件吗？
要检查问题，请打开 the app on mobile device and scan the code。
浏览器不支持将 APNG 视为图像以外的任何内容：无法确定 APNG 何时开始或停止播放。您可能只需将 APNG 转换为实际的视频文件格式，然后使用 <video> 嵌入图像来解决此问题，因为 that has an API for controlling playback。唉，似乎没有任何浏览器支持将 APNG 视为视频，因此您需要将其转换为另一种视频格式，例如 WebM。
如果您真的承诺不将 APNG 转换为视频文件格式，您可以使用 pngjs to decode the APNG, extracting the fdAT chunks 等库解决浏览器中的限制，然后通过这些提取的帧手动设置动画（APNG 中的每个帧本身就是一个（非动画）PNG）。
我有一个带有动画的应用程序 UI 通过 APNG 图像实现。
每个块有 2 个 APNG 图片和一个 PNG 图片：
- 出现 (APNG)
- 乒乓 (APNG)
- 静态 (PNG)
我需要在第一个动画结束后立即播放第二个动画，并且仅在触摸事件后才使 PNG 图像可见。我已经通过 setTimeout 完成了，但不幸的是，在刷新第二页后，浏览器完全忽略了一些动画，其中一些开始抖动，一些在不适当的时刻禁用。
我该如何解决这个问题？ 我可以捕捉到 APNG 动画结束的时刻吗？ APNG 图像会发出任何事件吗？
要检查问题，请打开 the app on mobile device and scan the code。
浏览器不支持将 APNG 视为图像以外的任何内容：无法确定 APNG 何时开始或停止播放。您可能只需将 APNG 转换为实际的视频文件格式，然后使用 <video> 嵌入图像来解决此问题，因为 that has an API for controlling playback。唉，似乎没有任何浏览器支持将 APNG 视为视频，因此您需要将其转换为另一种视频格式，例如 WebM。
如果您真的承诺不将 APNG 转换为视频文件格式，您可以使用 pngjs to decode the APNG, extracting the fdAT chunks 等库解决浏览器中的限制，然后通过这些提取的帧手动设置动画（APNG 中的每个帧本身就是一个（非动画）PNG）。