将 SVG 动画录制并保存为动画 GIF [关闭]

Question

是否有用于录制 SVG 动画并将其保存为动画 GIF 的库或工具？

SVG 几何图形使用 JavaScript 和 D3.js 进行动画处理，它们的颜色和不透明度使用 CSS 3 进行动画处理。

Answer 1

我发现只需使用带有 gif 录制功能的屏幕捕获程序就可以满足我的所有需求，而且它可靠且干净。有几个这样的屏幕捕获程序。我发现 LICEcap 很结实。

这是（几乎是逐字逐句）我对上述问题的处理：

该解决方案使用名为 LICEcap 的工具，这是一款适用于 Win 和 Mac 的屏幕捕获实用程序。步骤如下：

1. 下载 LICEcap here 并安装它。现在，如果你启动这个程序，它会有一个非常不寻常的形状，只是一个薄框架，框架内的所有东西都是透明的：

2. 转到带有 d3.js 动画的窗口并准备好一切，以便在某个时间点开始动画。假设我们想从 d3js.org 记录这个例子：

3. 现在启动 LICEcap 并将其放置在您想要在动画 gif 中包含的区域上：

4. 确保在左下角的编辑框中输入至少 20 fps，否则录制质量会很低。按记录。首先会出现一个对话框，您可以在此处选择是否希望您的 gif 处于无限循环中，或者只是重复一次，或者任意次数。还有一个有趣的选项是为鼠标点击添加一些视觉线索。还选择文件名，然后按保存。

5. 现在你可以做任何你必须做的事情来触发动画。我按了几次按钮分组和堆叠。在我决定够了之后，我按下了停止。结果文件是：

就是这样！