将一堆 png 或 webp 图像转换为 webp 动画

Question

如何将一堆 png 或 webp 图像转换为 webp 动画？

我试过这个：

convert mytiles.png -crop 100x100 +repage tmp.webp

但我只是得到一堆 webp 图像而不是动画。

另一种解决方案是使用gif2webp但homebrew webp包不包含此命令，这与官方文档中所写的不同。

Answer 1

将帧转换为 WebP，然后使用 webpmux

该webpmux程序带有 Google 的 WebP 参考库，即libwebp，如果还没有，您可以通过包管理器安装。它的手册页写道：

webpmux — 从非动画 WebP 图像创建动画 WebP 文件，从动画 WebP 图像中提取帧，并管理 XMP/EXIF 元数据和 ICC 配置文件。

如果您的单个框架采用另一种格式，您首先需要将它们转换为 WebP。对于这个任务，你可以使用 ImageMagick（这里有更多选项——除非你想要，否则一定要禁用有损压缩）：

convert frame001.png -define webp:lossless=true frame001.webp

然后您可以使用webpmux. 语法如下，其中大写的单词是占位符：

webpmux \
  -frame frame001.webp +D1+X1+Y1+M1±b \
  -frame frame002.webp +D2+X2+Y2+M2±b \
  -frame frame003.webp +D3+X3+Y3+M3±b \
  [-loop L]  [-bgcolor A,R,G,B] \
  -o animation.webp

每个框架都需要一些设置。除了持续时间之外的所有这些都可以是隐式的。

• Di 是帧的持续时间，以毫秒为单位。
• ( Xi, Yi) 是画布中帧的空间偏移（从左上角开始计算，X 向右，Y 向下）。
• Mi是此帧的处置方法，换句话说，一旦此帧过期，该怎么办。它有两个可能的值：
  • 0：不要处理，保留画布原样；
  • 1：处置，即清除画布并用背景填充（就此而言，消耗能量）。
• ±b是此帧的混合方法，它指定如何将此帧叠加在现有画布的顶部（仅当该帧具有 alpha 通道时才相关，否则无论如何它都会覆盖其下方的内容）。此参数有两个可能的值：
  • -b：不混合，框架覆盖现有画布；
  • +b: 使用 alpha 混合，框架与现有画布结合。

然后是适用于整个动画的可选设置：

• -loop L指定L播放动画的次数。您可能希望它是无限的，这意味着-loop 0，这是默认值。
• -bgcolor A,R,G,B指定背景颜色。四个分量（alpha、red、green、blue）的值范围从 0 到 255。查看者可以使用这种颜色作为画布的背景，这样画布是不透明的，但他们不需要；实际上，画布覆盖在其他元素之上，例如在网页中，我还没有看到使用过这种颜色。

另请参阅有关动画的WebP 规范。

最后提示：由于每个帧的命令行选项不仅仅是输入文件名，因此您不能frame*.webp直接使用通配符，并且编写命令行证明很麻烦。幸运的是，您可以使用 shell 构建命令行，例如使用 Bash：

convert frame001.png -define webp:lossless=true frame001.webp

上面的例子创建了一个动画，它的帧都是图像匹配frame*.webp，持续时间为 100?ms，没有空间偏移，并与之前的帧组合（对新帧使用 alpha 混合，之后不要处理它们）。