76

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

我知道我可以用很多单独的图像来做到这一点,但如果我能用GIF.

4

4 回答 4

66

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

(大部分代码直接取自他们的示例)

于 2013-05-15T18:11:48.843 回答
30

我使用 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停止播放,并并排渲染每一帧。
于 2014-12-03T15:02:46.617 回答
29

如果您可以将 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>

如果您希望动画不自动开始,请添加pausedanimation规则的末尾。

于 2017-07-11T16:46:27.617 回答
10

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

于 2010-03-05T07:41:40.187 回答