你能用Javascript控制GIF动画吗？

是否可以使用javascript控制正在显示的

GIF

图像的哪一帧和/或停止动画。我希望能够加载带有多个帧的

GIF

，并且只显示其中一个帧

---

我知道我可以用很多单独的图像来做，但是如果我可以用一个

GIF

来做我想做的事情，那么只需要担心一个文件。

你可以用一个单独的图像来做。

你可以使用这个库

它允许您启动/停止gif并控制gif在哪个帧上

<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif"
 width="360" height="360" rel:auto_play="1" rel:rubbable="1" />

<script type="text/javascript">
    $$('img').each(function (img_tag) {
        if (/.*\.gif/.test(img_tag.src)) {
            var rub = new SuperGif({ gif: img_tag } );
            rub.load(function(){
                console.log('oh hey, now the gif is loaded');
            });
        }
    });
</script>

$$（'img'）。每个（函数（img_标记）{
if（/.\.gif/.test（img_tag.src））{
var rub=newsupergif（{gif:img_tag}）；
摩擦载荷（函数（）{
log（'哦，嘿，现在gif被加载了'）；
});
}
});

（大部分代码直接取自他们的示例）

我使用它非常酷并且易于设置

发件人：

您可以在其中添加以下内容作为属性：

• 播放模式：

  • speed=“1.0”

    （默认模式）将速度乘以属性值

  • sync

    将播放延迟到外部对象

  • bpm=“120”

    将GIF同步到每分钟给定的节拍
• 选项：

  • 已停止

    阻止GIF设置动画

  • fill

    使GIF展开以覆盖其容器

  • n-times=“3.0”

    （仅限速度模式）在设定次数后停止播放（通过添加属性stopped）

  • snap

    （仅限同步和bpm模式）不允许较长的GIF同步到多个节拍，而是强制它们只适合一个节拍

  • 乒乓球

    先从前到后再从后到前播放GIF
• 调试：

  • debug

    打开Gif分解器的调试输出

  • 分解

    停止播放，并排渲染每个帧

---

如果您对将gif转换为精灵工作表没问题，您可以这样做（使用ImageMagick）：

甚至有可能新图像的尺寸更小

一旦你有一个精灵表，使用CSS动画。此处使用具有固定帧时间的动画：

var el=document.getElementById（'anim'）；
函数播放（）{
el.style.animationPlayState='running'；
}
函数暂停（）{
el.style.animationPlayState='暂停'；
}
函数重置（）{
el.style.animation='none'；
el.offsetHeight；/*触发回流以立即应用更改*/
el.style.animation=null；
}
函数停止（）{
重置（）；
暂停（）；
}

#动画{
背景图像：url（'https://i.stack.imgur.com/J5drY.png');
宽度：250px；
高度：188px；
动画：动画1.0s步骤（10）无限；
}
@关键帧动画{
100%{背景位置：-2500px；}
}

玩
暂停
重置
停止

你也可以用一个带有精灵的大图像来完成，并且只通过剪切图像来显示精确的精灵同意@MBO，使用精灵相当简单，检查这个相关问题：使用没有声音的视频。就像9gagI一样，我认为简短的答案是否定的。如果你想使用JavaScript，你最有可能的选择是控制正版视频或使用CSS精灵。使用CSS精灵的好处是，最终传输的是单个图像，并且该图像的整体压缩比多个单独的图像要好。这是正确的，只要你想做的是围绕2D平面分割图像的不同变体，不要把它分割成单独的帧。这个代码对我来说似乎不起作用。它使用

sup1.load（）

播放gif，然后在gif播放完毕后，使用

sup1.move\u to（frame）

转到第一帧。我还尝试使用了

pause（）

，但它似乎也没有在第一帧冻结gif。我对原始代码进行了编辑，使其在第一帧停止，但有没有办法在不编辑代码的情况下在第一帧暂停gif？@LeoCHan我已将示例代码更新为最新的api，请立即尝试。此答案比已接受的答案更好地解决了这个问题。我一定错过了一些东西。美元是多少？我没有定义。请注意本图书馆精美印刷品中的注意事项，这一点非常重要<代码>警告：相同的域来源。gif必须与正在加载的页面位于同一域（以及端口和协议）。从他们的页面，它的工作原理如下：

：您可以通过播放模式、选项和调试向该标记添加多个属性。我试图编辑你的答案，但被拒绝了，如果你有时间，你可以自己编辑。这是解决这个问题的一个很棒的简单方法，gratz！这种方法对我有效；它很容易实施，并根据您的喜好进行调整。我在这里使用ezgif创建我的工作表：我知道这是一个老问题和答案，但我有一个问题。我非常喜欢这个答案，我想知道你是否可以隐藏或使动画GIF消失，然后用这个答案重新出现。

<x-gif src="probably_cats.gif"></x-gif>

montage animation.gif -coalesce -tile x1 -geometry +0+0 -background None -quality 100 spritesheet.png