使用JavaScript使动态GIF只循环一次

Question

我正在尝试在网站上制作一个介绍性的动画标志，我希望动画只播放一次，然后触发一个短脚本来显示“继续”按钮。我希望在HTML中有一种方法可以告诉GIF仅循环一次，但我找不到任何这样的属性或标记。现在我找不到任何在GIF完成动画后触发的触发函数，这让我感到非常疯狂！如果您能解决这个问题或指导我使用更好的动画格式来避开所有这些麻烦，我将不胜感激。

- superspartan999

---

抱歉，GIF的工作方式不是这样的。当GIF“完成”时，不会触发任何事件，并且循环由GIF本身控制。 - user229044

所以...HTML不能控制GIF循环，GIF可以。因此，您有几个选择，最好的选择是使用JavaScript的setTimeout或制作自己的不循环的GIF，或两者兼而有之。 - serakfalcon

您可以使用任何图像，并借助css3动画使其旋转。 - LarsBauer

我曾经被链接到这个网站，它似乎能够非常好地操作gif。如果可能的话，我会查找他们的代码，看看是否可以仅使用JavaScript（而不是服务器端）完成此操作。 - Joeytje50

GIMP可以保存GIF动画，并带有一个属性用于设置循环播放或仅播放一次。 - s3lph

我能够使用GIMP消除循环！谢谢:D - superspartan999

Answer 1

我已经查看了http://gifshake.com的代码，看起来该网站使用http://gifshake.com/assets/application-0d2f240603d4b373f1d6768aa71baf42.js将其gif转换为交互式画布。如果您想知道，他们使用的代码是：

var sup1 = new SuperGif({ gif: document.getElementById('thegif') } );
sup1.load();

这段内容涉及IT技术，其中id="thegif"的元素是一个带有src属性的图片，包含gif图像的url。无论如何，我认为控制gif图像并不是一件真正简单的事情，除非像他们一样导入相同的库。对于像你这样的情况，我认为那并不是最实用的解决方案。最好的方法是在图像编辑器（如GIMP）中编辑gif图像，并将其设置为仅播放一次，而不是无限循环。您可以通过打开GIF文件，然后按下 Ctrl+E（导出），并将其保存为GIF来完成。然后在更改其他选项时，将其保存为动画并取消选择“永久循环”复选框。希望这可以帮到您。

简而言之：仅使用JavaScript不能以可管理的方式做到这一点；最好自己编辑gif图像。

- Joeytje50

---

值得注意的是，当将GIF设置为仅循环一次时，大多数浏览器会遵守此规则，但有些浏览器会循环两次。这是因为您将"loop"的值设置为"1"。一些浏览器认为这意味着“播放GIF 1次”，这正是我们想要的。而其他浏览器则认为这意味着“循环播放GIF 1次”（或者说播放GIF两次）。 - tomysshadow

@tomysshadow - 哈哈，就像有人告诉我他在一栋楼的第一层，我不知道那是地面层还是上面的一层。 - vsync

这是奇怪的逻辑，我知道。 - tomysshadow