javascript - 使用 JavaScript 制作动画 GIF 只循环一次

标签 javascript html css animation gif

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

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

最佳答案

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

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

其中带有 id="thegif" 的元素是带有 src 属性的图像,其中包含 gif 图像的 url。无论如何,我认为没有真正简单的方法来控制这样的 gif,除了像他们一样导入那些相同的库。对于像您这样的情况,我认为这不是最实用的解决方案。您最好在 GIMP 等图像编辑器中简单地编辑 gif,并将其设置为只播放一次,而不是无限播放。您可以打开 GIF,然后按 Ctrl+E(导出),然后将其另存为 gif。然后在更改更多选项时,将其另存为动画并取消选中“永远循环”复选框。希望对您有所帮助。

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

关于javascript - 使用 JavaScript 制作动画 GIF 只循环一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23845671/

相关文章:

javascript - 检测按键中的左移或右移键 - JQuery

javascript - 如何避免Google jsapi加载阻塞网页加载

php - 根据选择的下拉菜单自动填充,需要帮助

jquery - 在 $(this) 中选择元素时遇到问题,即使我可以在 $(this) innerHTML 中看到它

html - 不同屏幕分辨率的CSS?

javascript - React 应用程序显示空白页面

html - 如何隐藏选择框的默认箭头并设置所需的图像?

javascript - Tinymce 能否给我一些保留所有样式的准确 HTML 内容(真正意味着所见即所得)?

javascript - 在页面内跳转而不重新加载要监听什么事件?

jquery - 在悬停时在传单 map 上添加图像