使用 JavaScript 制作动画 GIF 仅循环一次答案

【问题标题】：Making animated GIF only loop once using JavaScript使用 JavaScript 制作动画 GIF 仅循环一次
【发布时间】：2014-07-13 18:48:50
【问题描述】：

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

无论是解决这个问题还是被引导到更好的动画格式来解决所有这些废话，我都将不胜感激。

【问题讨论】：

不是 Gif 的工作方式，抱歉。当 gif “完成”时不会引发任何事件，并且循环由 gif 本身控制。
so... HTML 不能控制 GIF 循环，而 GIF 可以。因此，您有多种选择，最好是使用带有 javascript 的 setTimeout 或制作自己的不循环 GIF 或两者兼而有之。
您可以使用任何图像并借助 css3 动画让它旋转
我曾经链接到this site，它似乎可以很好地处理gif。我会检查他们的代码，如果我能找到是否可以只用 JavaScript（所以不是服务器端）来做到这一点。
GIMP 可以保存带有循环播放或只播放一次属性的 GIF。

标签： javascript html css animation gif

【解决方案1】：

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

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

其中带有id="thegif" 的元素是带有src 属性的图像，其中包含指向gif 图像的url。无论如何，我认为除了导入与它们相同的库之外，没有真正简单的方法来控制这样的 gif。对于像您这样的情况，我认为这不是最实用的解决方案。您最好在 GIMP 等图像编辑器中简单地编辑 gif 并将其设置为只播放一次，而不是无限播放。您可以通过打开 GIF，然后按 Ctrl+E（导出）来做到这一点，并将其保存为 gif。然后在更改其他选项时，将其保存为动画并取消选中“Loop forever”复选框。我希望这会有所帮助。

TL;DR：仅使用可监督数量的 JavaScript 是不可能做到这一点的；你最好自己编辑 gif。

【讨论】：

另外值得注意的是，当设置一个GIF循环一次时，大多数浏览器都会服从，但有些会循环两次。那是因为您将“循环”的值设置为“1”。一些浏览器认为这意味着“播放 GIF 1 次”，这正是我们想要的。其他人认为它的意思是“循环 GIF 1 次”（或者，播放 GIF 两次）。
@tomysshadow - 哈，就像有人告诉我他在 1 楼的某栋楼里，我不知道那是一楼还是楼上
这是很奇怪的逻辑，我知道。