先播放一段GIF，然后无限循环播放某一段

Question

我的网站上有一个透明的 gif 动画 here。

理想情况下，我希望播放动画一次，然后重复几帧，其中包含整个徽标，但看起来单个 gif 无法完成此操作。

做一些研究看起来我有几个选择，但我不确定在这种情况下什么是最好的。

使用 javascript 为 gif 计时，然后在应该播放完时换出图像。这似乎非常不可靠，并且在连接速度慢的情况下，它可能根本无法像我想要的那样运行。我认为没有其他方法可以检测 gif 动画何时播放完毕，但我的看法可能是错误的。
使用 gif 以外的格式可能可以为我完成此操作。
编辑 gif 使其只播放一次，并使最后一帧成为我想要的静止画面。这会删除任何动画，我宁愿选择手绘的动画感觉，但我觉得我可能最终会这样做。
以某种方式找到一个纯粹的 javascript/svg + 路径解决方案，这似乎非常困难而且我根本无法相对快速地完成。

有没有人遇到过类似的问题，有什么建议吗？

Answer 1

将所有帧合并为一个单一的幻灯片图像（透明 PNG 最好，如果可能的话使用抗锯齿）。将其设置为具有单帧高度的 div 元素的背景，然后通过将背景位置 CSS 属性设置为合适的值来在所需的帧上设置动画。

这是一个使用 filmstrip image containing 14 frames 制作的简单示例，其中循环播放最后 3 帧：

$(function() {
  var ani = {
    frame_height: 200,
    num_frames: 14,
    loop_frame: 11,
    frame_duration: 125,
    cur_frame: 0
  };
  window.setInterval(
    function() {
      $('#draw').css( 'background-position-y',
                      (-ani.frame_height * ani.cur_frame ) + 'px'
                    );
      ani.cur_frame = (ani.cur_frame + 1) % ani.num_frames;
      if (ani.cur_frame == 0) ani.cur_frame = ani.loop_frame;
    },
    ani.frame_duration
  );
});

#draw {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: url(https://i.stack.imgur.com/ppyyt.png) top center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draw"></div>

注意：如果将动画 div 的默认背景设置为动画的第一帧，则不需要设置 onload 事件处理程序，因为 JQuery加载后只会运行您的代码。

要将动画 GIF 转换为幻灯片，我建议使用 ImageMagick。只需两个简单的步骤：

将动画 GIF 解压缩到一系列编号的 dividual 帧中：

convert -coalesce Logo-norepeat-transparent-white-big.gif f_%05d.png

将这些帧拼接在一起，一个在另一个之上：
```
convert -append f_[0-9]*.png logo_frames.png
```

如果你的 GIF 动画中的帧有不同的持续时间，那么事情会稍微复杂一点，但基本原理是一样的。

先播放一段GIF，然后无限循环播放某一段

Play one part of GIF first, then loop a certain section indefinitely

jquery

animation

svg

gif

animated-gif