你能用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

您可以使用CSS sprites使用单个图像完成此操作。