1

所以我有一个包含很多 gif 文件的网站（具体来说是笑脸）。为了优化加载性能，我决定将请求数量减少到一个，将所有 gif 文件加载为一个文件。

我发现的最佳选择是创建一个单独的 sprite 文件。还有一个 ImageMagic 程序可以帮助很多，并且有很棒的wiki。经过几个小时的修补，我发现了以下内容：

  1. 我需要保留动画，而不仅仅是将静态图像作为精灵结果，因此每个 gif都将存储为多个图像，然后使用playandkeyframes进行动画处理
  2. 我可以使用轻松生成精灵文件montage *.gif sprites.png
  3. 我还需要一些关于图像开始和结束坐标的信息。由于我的 gif 文件每个都有不同的高度和宽度，在我手动完成输入尺寸之前，我会遭受死亡。我发现的最佳选择是使用 ImageMagick 生成一个与 png 参数相同的 html 文件。Html 文件包含每个 gif 文件的开始和结束坐标的区域，我可以用来创建 css。一个例子：<area href="./base/0000.gif" shape="rect" coords="0,0,89,39" alt="" />
  4. ImageMagickmontage的tile x1参数会创建一个巨大的宽图像（例如 200 个 gif，每个 20 个部分 x 40 像素 = ~ 160000 像素 x 40 像素），这会使浏览器崩溃。因此，我需要将其设为多行和多列，这会使我的 css 计算复杂化。
  5. 即使知道开始和结束位置，我仍然需要手动计算。从坐标我可以计算(X2-X1/[gif.width] 如果 Y 坐标在一行中) 的stepscss ，但我仍然不知道它的速度。animation此外，如果精灵图像上的部分位于不同的行上，它会使创建keyframes play动画变得复杂，我仍然需要手动创建（或通过编写大量 gif 文件的脚本）。例如： 在此处输入图像描述+ 在此处输入图像描述+ 在此处输入图像描述+ montage ./*.gif -geometry +0+0 -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 out.png= 在此处输入图像描述。如您所见，第一个笑脸被放置在 4 行上。我需要某种棘手的 ImageMagicktile参数来让每行都有不同的 gif。
  6. 我的 Gif 被优化为使用“组合”模式。这意味着它们的部分可能是不同的大小并且缺少完整图像的部分。例如： 在此处输入图像描述反汇编为在此处输入图像描述.
  7. 为了解决第 5 步，我可以通过 ImageStick 的转换工具将 gif 转换为带图层的。这是另一个问题：convert -layers dispose input.gif output.gif产生一些错误。例如在此处输入图像描述结果文件缺少一些帧：在此处输入图像描述 下面的行是结果的精灵版本在此处输入图像描述

总结我的问题：

  • 有没有更简单的方法可以从多个 gif 中创建 sprites 文件？解决所有这些问题让我很头疼。必须有一个神奇的工具可以一次性解决所有问题。例如spritegen.website-performance，但它只创建静态图像而没有动画。
  • 如何从没有步骤 7 中描述的错误的 gif 中处理层（另请参阅）？
  • 如何使用 ImageMagick 或任何其他工具生成单个 sprite 文件，并且每行（或每列）只有 1 个 gif，如步骤 5 中所述。
  • 有没有办法将多个 gif 组合到一个 gif 中，该 gif 也可以动画，然后像精灵一样将图像定位在其背景上？

任何形式的帮助表示赞赏。甚至链接到允许创建单个 sprite 文件 + 带有动画的 css 的文章或网站也会很棒。我在这里先向您的帮助表示感谢！

此致，

4

1 回答 1

1

感谢ImageMagick 论坛，我终于找到了答案。

在此处输入图像描述+ 在此处输入图像描述+ 在此处输入图像描述+

convert -background none \
   \( smilie_yellow.gif -coalesce +append \) \
   \( smilie_green.gif -coalesce +append \) \
   \( smilie_red.gif -coalesce +append \) \
   -append -flatten 3_smilies.png

=在此处输入图像描述

于 2016-05-18T11:51:42.680 回答