使用 css 信息拼接多个 gif 文件

Question

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

我发现的最佳选择是创建单个精灵文件。还有一个 ImageMagic 程序对此有很大帮助并且非常棒 wiki。修补了几个小时后，我发现了以下内容：

我需要保留动画，而不仅仅是将静态图像作为 sprite 结果，因此每个 gif 将存储为多个图像，然后使用 play 和 keyframes 作为 here 进行动画处理
我可以使用 montage *.gif sprites.png
我还需要一些关于图像开始和结束坐标的信息。由于我的 gif 文件每个都有不同的高度和宽度，在我完成手动输入尺寸之前我会被折磨死。我发现的最佳选择是使用与 png 具有相同参数的 ImageMagick 生成一个 html 文件。 Html 文件包含区域以及我可以用来创建 css 的每个 gif 文件的开始和结束坐标。一个例子：<area href="./base/0000.gif" shape="rect" coords="0,0,89,39" alt="" />
ImageMagick montage 的 tile x1 参数创建了一个巨大的宽图像（例如 200 张 gif，每张有 20 个部分 x 40px 每个 = ~ 160000px x 40px）使浏览器崩溃。所以我需要使它成为多行和多列，这使我的 css 计算变得复杂。
即使知道开始和结束位置我仍然需要进行手动计算。从坐标我可以算出 steps css 为 animation （X2-X1/[gif.width] 如果 Y 坐标在一行中），但我仍然不知道它的速度。此外，如果位于不同行的 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 使用“合并”模式。这意味着它们的部分可能大小不同并且缺少完整图像的部分。例如： disassembles as .
为了解决第 5 步，我可以通过 ImageStick 的转换工具将 gif 转换为带有图层的 gif。这是另一个问题：convert -layers dispose input.gif output.gif 会产生一些错误。例如 resulting file lacks some frames: 下面一行是 resulting

总结我的问题:

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

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

此致，

Answer 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

=

使用 css 信息拼接多个 gif 文件

Sprite multiple gif files with css info

imagemagick

css-sprites

sprite

sprite-sheet

montage