您可以使用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"

 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>

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 停止播放，并并排渲染每一帧。