Question

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

理想情况下，我希望这一次播放动画，然后重复几个包含整个徽标的帧，但它看起来并不像一个gif就能实现这一点。

做一些研究看起来我有几个选择，但我不确定在这样的场景中最好的是什么。

使用javascript计时gif，然后在完成播放时交换图片。这似乎非常不可靠，并且在连接速度慢的情况下，它可能会像我想要的那样起作用。我不会想到其他方法可以检测到gif动画何时播放完毕，但我可能错了。
使用gif以外的格式可以为我完成此操作。
编辑gif，使其只播放一次，并使最后一帧成为我喜欢的内容。这将删除任何动画，我宁愿选择那种手绘的动画效果，但我有一种感觉，我可能最终会这样做。
以某种方式找到一个纯粹的javascript / svg +路径解决方案，这看起来非常困难＆amp;不是我能相对快速地做的事情。

有没有人遇到类似这个有任何建议的问题？

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打包成一系列编号的单个帧：

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

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

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

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

1 个答案: