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

Question

是否有用于记录和保存SVG动画的库或工具作为动画GIF？

使用JavaScript和D3.js对SVG几何进行动画处理，并使用CSS 3对其颜色和不透明度进行动画处理。

Answer 1

我发现简单地使用具有gif录制功能的屏幕捕获程序可以满足我的所有需求，并且它是可靠和干净的。 有几个这样的屏幕捕获程序。 我发现LICEcap坚固。

这是（几乎逐字）我上面提到的问题的程序：

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

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

2. 使用d3.js动画转到窗口并准备好所有内容，以便您可以在某个时刻开始动画。 让我们说我们想从d3js.org记录这个例子：

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

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

5. 现在，您可以执行任何操作来触发动画。 我按了几次按钮Grouped and Stacked。 在我做出足够的决定后，我按下Stop。 产生的文件是：

而已！