使用 css 信息绘制多个 gif 文件

Posted 2023-03-25

【中文标题】使用 css 信息绘制多个 gif 文件

【英文标题】：Sprite multiple gif files with css info

【发布时间】：2016-09-10 09:28:34

【问题描述】：

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

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

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

总结我的问题：

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

感谢任何形式的帮助。甚至链接到允许创建单个精灵文件 + 带有动画的 css 的文章或网站也会很棒。提前感谢您的帮助！

最好的问候，

【参考方案1】：

感谢ImageMagick forum我终于找到答案了。

+++

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

=