先播放GIF的一部分，然后无限循环某个部分 [英] Play one part of GIF first, then loop a certain section indefinitely

问题描述

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

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

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

1. 使用Java脚本为gif计时，然后在应播放完时调出图像。这似乎非常不可靠，在连接速度很慢的情况下，它可能根本不会像我想要的那样工作。我认为没有其他方法来检测gif动画何时播放完毕，但我在这一点上可能是错误的。

2. 使用gif以外的格式，或许可以为我完成此操作。

3. 编辑gif，使其只播放一次，并使最后一帧成为我想要的静止画面。这将删除所有动画，我更喜欢手绘的动画感觉，但我有一种感觉，我可能最终会这样做。

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

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

推荐答案

将所有帧合并为一个胶片图像(最好是透明的png，如果可能，最好使用抗锯齿功能)。将其设置为具有单帧高度的div元素的背景，然后通过将背景位置css属性设置为合适的值，在所需的帧上设置动画。

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(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动画中的帧具有不同的持续时间，则情况会稍微复杂一些，但基本原则是相同的。

这篇关于先播放GIF的一部分，然后无限循环某个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！