我有一个带有通过 APNG 图像实现的动画 UI 的应用程序。
每个块有 2 个 APNG 图像和一个 PNG 图像:
- 出现 (APNG)
- 乒乓球 (APNG)
- 静态 (PNG)
我需要在第一个动画完成后立即播放第二个动画,并且仅在触摸事件后才使 PNG 图像可见。我已经通过setTimeout
但不幸的是,在第二页刷新后浏览器完全忽略了一些动画,其中一些开始抖动,一些在不适当的时刻禁用。
我该如何解决这个问题?我可以捕捉到 APNG 动画完成的那一刻吗?APNG 图像会发出任何事件吗?
我有一个带有通过 APNG 图像实现的动画 UI 的应用程序。
每个块有 2 个 APNG 图像和一个 PNG 图像:
我需要在第一个动画完成后立即播放第二个动画,并且仅在触摸事件后才使 PNG 图像可见。我已经通过setTimeout
但不幸的是,在第二页刷新后浏览器完全忽略了一些动画,其中一些开始抖动,一些在不适当的时刻禁用。
我该如何解决这个问题?我可以捕捉到 APNG 动画完成的那一刻吗?APNG 图像会发出任何事件吗?
浏览器没有任何内置支持将 APNG 视为图像以外的任何东西:无法确定 APNG 何时开始或停止播放。您可以通过将 APNG 转换为实际的视频文件格式并嵌入图像<video>
来解决此问题,因为它具有用于控制播放的 API。唉,似乎没有任何浏览器支持将 APNG 视为视频,因此您需要将其转换为另一种视频格式,例如 WebM。
如果您真的致力于不将 APNG 转换为视频文件格式,则可以通过使用pngjs之fdAT
类的库来解码 APNG、提取块,然后通过这些提取的帧手动制作动画(每个APNG 中的帧本身就是(非动画)PNG)。