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

Posted 2023-03-28

【中文标题】APNG 在第二个页面刷新后不同步

【英文标题】：APNG gets out of sync after second page refresh

【发布时间】：2021-11-18 13:27:33

【问题描述】：

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

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

出现 (APNG) 乒乓球 (APNG) 静态 (PNG)

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

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

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

【参考方案1】：

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

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