你能用Javascript控制GIF动画吗？

Question

是否可以使用javascript来控制GIF图像的哪个帧正在显示和/或停止动画.我希望能够加载GIF几个帧,只显示其中一个.

我知道我可以用很多单独的图像来做这件事,但如果我可以用a做我想做的事情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" (仅限速度模式)在设定次数后停止播放(通过添加已停止的属性);
  • snap (仅限同步和bpm模式),而不是允许更长的GIF同步到多个节拍,强制它们只适合一个;
  • ping-pong 从前到后然后从前到后播放GIF;
• 调试:
  • debug 打开Gif Exploder的调试输出;
  • exploded 停止播放,并将每个帧并排放置.

Answer 3

如果你可以将你的gif转换为精灵表,你可以这样做(使用ImageMagick):

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

甚至可能新图像的尺寸较小.

有了精灵表后,使用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>

如果您希望动画不能自动启动,请添加paused到animation规则的末尾.

Answer 4

您可以使用CSS sprites使用单个图像来完成.