将SVG动画录制并保存为动画GIF

Question

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

使用JavaScript和D3.js对SVG几何进行动画处理，并使用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. 现在，您可以执行任何操作来触发动画。我按了几次按钮Grouped and Stacked。在我做出足够的决定后，我按下Stop。产生的文件是：

就是这样！