你能用 Javascript 控制 GIF 动画吗？

Can you control GIF animation with Javascript?

提问by Logan

Is it possible to use javascript to control which frame of a GIFimage is showing and/or stop the animation. I want to be able to load a GIFwith several frames and only show one of them.

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

I know I could do it with lots of separate images, but if I can do what I want with a GIF, it will only be one file to worry about.

我知道我可以用很多单独的图像来做，但如果我可以用GIF.

采纳答案by N 1.1

You can do it with a single image using CSS sprites.

您可以使用CSS sprites对单个图像进行操作。

回答by Charlotte

You can use the libgiflibrary.

您可以使用libgif库。

It allows you to start/stop the gif and control which frame the gif is on.

它允许您启动/停止 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>

(most of the code is taken directly from their example)

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

回答by Oscar Nevarez

I use x-gifit's pretty cool and easy to setup.

我使用 x-gif它非常酷且易于设置。

From Github:

来自Github：

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

Where you can add the following as attributes:

您可以将以下内容添加为属性：

• Playback modes:
  • speed="1.0"(default mode) multiplies the speed by the value of the attribute;
  • syncdefers playback to an external object;
  • bpm="120"syncs GIFs to a given beats-per-minute;

• Options:

  • stoppedprevents the GIF from animating;

  • fillcauses the GIF to expand to cover its container;

  • n-times="3.0"(speed mode only) stops playback (by adding the attribute stopped) after a set number of times;
  • snap(sync & bpm modes only) instead of allowing longer GIFs to sync to multiple beats, force them to fit into only one;
  • ping-pongplays the GIF front-to-back then back-to-front;
• Debugging:
  • debugturns on debug output from the Gif Exploder;
  • explodedstops playback, and renders each frame out side-by-side.

• 播放模式：
  • speed="1.0"（默认模式）将速度乘以属性值；
  • sync将播放推迟到外部对象；
  • bpm="120"将 GIF 同步到给定的每分钟节拍数；

• 选项：

  • stopped阻止 GIF 动画；

  • fill导致 GIF 扩展以覆盖其容器；

  • n-times="3.0"（仅限速度模式）在设定次数后停止播放（通过添加属性停止）；
  • snap（仅限同步和 bpm 模式）不要让较长的 GIF 同步到多个节拍，而是强制它们只适合一个节拍；
  • ping-pong从前到后播放 GIF，然后从后到前；
• 调试：
  • debug打开 Gif Exploder 的调试输出；
  • exploded停止播放，并排渲染每一帧。

回答by user

If you are OK with converting your gif to a sprite sheet, you can do it this way (using ImageMagick):

如果您可以将 gif 转换为精灵表，您可以这样做（使用 ImageMagick）：

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

It is even likely that the new image will be of lesser size.

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

Once you have a sprite sheet, use CSS animation. An animation with a fixed frame time is used here:

有了精灵表后，就可以使用 CSS 动画了。此处使用具有固定帧时间的动画：

var el = document.getElementById('anim');
function play() {
  el.style.animationPlayState = 'running';
}
function pause() {
  el.style.animationPlayState = 'paused';
}
function reset() {
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow to apply the change immediately */
  el.style.animation = null;
}
function stop() {
  reset();
  pause();
}

#anim {
  background-image: url('https://i.stack.imgur.com/J5drY.png');
  width: 250px;
  height: 188px;
  animation: anim 1.0s steps(10) infinite;
}
@keyframes anim {
  100% { background-position: -2500px; }
}

<div id="anim" title="Animated Bat by Calciumtrice"></div>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="reset()">Reset</button>
<button onclick="stop()">Stop</button>

If you want the animation to not start automatically, add pausedto the end of animationrule.

如果您希望动画不自动开始，请添加paused到animation规则的末尾。