使用 JavaScript 使动画 GIF 仅循环一次

Question

我正在尝试在网站上制作一个介绍性动画徽标，我只想播放一次动画，然后触发一个简短的脚本，该脚本将显示“继续”按钮。我希望 HTML 中有一种方法可以告诉 GIF 只循环一次，但我找不到任何这样的属性或标签。所以现在我在GIF完成动画后找不到任何类型的触发功能，这让我发疯！

我将不胜感激任何帮助解决这个问题或被引导到更好的动画格式来解决所有这些废话。

Answer 1

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

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

其中 with 元素id="thegif"是一个图像，其src属性包含 gif 图像的 url。不管怎样，我认为除了导入相同的库之外，没有真正简单的方法来控制这样的 gif。对于像您这样的情况，我认为这不是最实用的解决方案。您最好只需在图像编辑器（例如 GIMP）中编辑 gif，并将其设置为仅播放一次，而不是无限播放。您可以通过打开 GIF，然后按Ctrl+ E（导出）并将其另存为 gif 来完成此操作。然后，当更改其他选项时，将其另存为动画并取消选中“永远循环”复选框。我希望这有帮助。

TL;DR：仅靠大量的 JavaScript 是不可能做到这一点的；你最好自己编辑一下 gif。