APNG num_plays适用于Firefox,但不适用于Chrome

时间:2018-01-26 11:40:57

标签: javascript html google-chrome animation apng

APNG文件规范供参考:https://wiki.mozilla.org/APNG_Specification

num_plays定义动画PNG循环的次数。 0是一个特殊值,表示动画将无限循环。

我在网上发现了一些想要在网页上显示的APNG。他们都将num_plays设置为0.(在这个特定的例子中,来自神奇宝贝游戏的Ivysaur的动画图像:https://cdn.bulbagarden.net/upload/c/c8/Spr_3e_002.png

我在Chrome中显示原始APNG没有问题,动画无休止地循环播放。

但对我来说重要的是动画只播放一次,然后显示最后一帧。我尝试了一些基于HTML和JS的解决方案,例如等待几秒钟并用我画过的画布替换APNG img元素,但是我无法得到我想要的结果。图像将重置为动画结束时的第一帧而不是最后一帧,或者有时图像内容的像素偏移会莫名其妙地不同。

当我发现我可以更改APNG的acTL部分中的num_plays值以改变它循环到1的次数时 - 我就这样做了。

它在Firefox中完美运行!这是一个显示我想要的行为的示例:

APNG animation plays once in Firefox, then displays the final frame

但在Chrome中,更改num_plays后,APNG根本不再动画。

APNG animation no longer plays at all in Chrome after changing num_plays

可能导致它无法在Chrome中制作动画的原因是什么?是否不支持非零num_plays?我有什么替代方法可以获得与Firefox中相同的行为?

1 个答案:

答案 0 :(得分:0)

问题是我修改了我从互联网上下载的APNG,它最初使用十六进制编辑器的num_plays为0。当我这样做时,我忽略了更新acTL部分的CRC; Firefox正如我预期的那样播放了格式错误的APNG,但是由于我的APNG没有正确的CRC而无法满足规范,因此Chrome中止了。