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

Posted 2023-02-16

【中文标题】将 SVG 动画录制并保存为动画 GIF [关闭]

【英文标题】：Recording and saving an SVG animation as an animated GIF [closed]

【发布时间】：2014-02-14 15:55:38

【问题描述】：

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

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

【问题讨论】：

Creating animated gifs out of D3.js animations的可能重复

@LarsKotthoff 谢谢！刚刚查看了支流 src 并看到它使用 gif.js 所以我会检查一下

【参考方案1】：

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

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

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

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

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

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

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

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

就是这样！

【讨论】：

感谢分享，很有用！

如何让录制软件在动画开始时开始，在动画结束时结束？

我不能用这个软件获得平滑的过渡..

@Anirudha 平滑度可以调整，有一个参数“FPS”（每秒帧数）用于截屏。

我希望看到发布的另一个解决方案。当您想在 SVG 中截屏透明度时会发生什么？