先播放 GIF 的一部分，然后无限循环某一部分

Question

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

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

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

1. 使用 javascript 对 gif 进行计时，然后在应该播放完毕时交换图像。这看起来非常不可靠，并且在慢速连接上它可能根本无法像我想要的那样运行。我认为没有其他方法可以检测 gif 动画何时完成播放，但我可能是错的。

2. 使用 gif 以外的格式也许可以为我完成此任务。

3. 编辑 gif，使其只播放一次，并使最后一帧成为我想要的静止图像。这会删除任何动画，我宁愿选择手绘的动画感觉，但我有一种感觉，我可能最终会这样做。

4. 不知何故，找到一个纯 javascript/svg + 路径解决方案，这似乎非常困难，而且我根本无法相对快速地完成。

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

Answer 1

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

下面是一个使用包含 14 帧的幻灯片图像制作的简单示例，其中最后 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。只需两个简单的步骤：

1. 将动画 GIF 解压为一系列编号的单独帧：

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

2. 将这些框架缝合在一起，一个在另一个之上：

   convert -append f_[0-9]*.png logo_frames.png
   

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