您可以使用Javascript控制GIF动画吗？

Question

是否可以使用JavaScript来控制GIF显示图像的哪一帧和/或停止动画。我希望能够加载GIF多个框架，并且仅显示其中一个框架。

我知道我可以用很多单独的图像来做，但是如果我可以用来做我想做的事GIF，那就只需要担心一个文件了。

Answer 1

您可以使用libgif库。它使您可以启动/停止gif并控制gif所在的帧。<script type="text/javascript" src="./libgif.js"></script><img src="./example1_preview.gif" rel:animated_src="./example1.gif"&nbsp;width="360" height="360" rel:auto_play="1" rel:rubbable="1" /><script type="text/javascript">&nbsp; &nbsp; $$('img').each(function (img_tag) {&nbsp; &nbsp; &nbsp; &nbsp; if (/.*\.gif/.test(img_tag.src)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var rub = new SuperGif({ gif: img_tag } );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rub.load(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('oh hey, now the gif is loaded');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });</script>

Answer 2

我使用 x-gif非常酷并且易于设置。从Github：<x-gif src="probably_cats.gif"></x-gif>您可以在其中添加以下内容作为属性：播放模式：speed="1.0" （默认模式）将速度乘以属性值；sync 延迟播放到外部对象；bpm="120" 将GIF同步到给定的每分钟节拍；选项：stopped 阻止GIF动画；fill 使GIF扩展以覆盖其容器；n-times="3.0" （仅速度模式）在设置的次数后停止播放（通过添加stop属性）；snap （仅限同步和bpm模式），而不是让更长的GIF同步到多个节拍，而是强迫它们只适合一个节拍；ping-pong 从头到尾然后从头到尾播放GIF；调试：debug 打开Gif Exploder的调试输出；exploded 停止播放，并并排渲染每一帧。