记录并将SVG动画保存为动画GIF [英] Recording and saving an SVG animation as an animated GIF
问题描述
是否有用于记录并将动画保存为动画GIF的 SVG 动画的库或工具？
Is there a library or tool for recording and saving an SVG animation as an animated GIF?
SVG几何图形是使用JavaScript和 D3.js 制作的动画，颜色和不透明度使用 CSS 3 进行动画处理。
The SVG geometries are animated with JavaScript and D3.js, and their colors and opacities are animated with CSS 3.
推荐答案
我发现只需使用带有gif录音功能的屏幕捕获程序就可以满足我的所有需求，并且它是可靠和干净的。有几个这样的屏幕捕获程序。我发现LICEcap固定。
I found that simply using a screen capture program with gif recording feature satisfies all my needs, and it is reliable and clean. There are several such screen capture programs. I found LICEcap solid.
这里是（几乎逐字）我从上面提到的问题的程序：
Here is (almost verbatim) my procedure from question mentioned above:
使用一个名为LICEcap的工具，一个用于Win和Mac的屏幕捕获实用程序。具体步骤如下：
The solution uses a tool called LICEcap, a screen capture utility for Win and Mac. Steps are following:
-
下载LICEcap 这里并安装它。现在，如果你启动这个程序，它将有一个相当不寻常的形状，只是一个薄框架，框架内的一切都将是透明的：
Download LICEcap here and install it. Now, if you start this program, it will have a rather unusual shape, just a thin frame, and everything inside the frame will be transparent:
使用d3.js动画进入窗口，动画。假设我们要从d3js.org记录这个例子：
Go to the window with your d3.js animation and prepare everything so that you could start animation at some point. Lets say we want to record this example from d3js.org:
现在开始使用LICEcap，并将其放置在动画gif所需的区域：
Now start LICEcap and position it over the area you want to have in your animated gif:
确保您在左下角的编辑框中输入至少20 fps ，否则录音会质量较差。按记录。一个对话框将首先出现，你在这里选择是否你想要你的gif是一个无限循环，或只是重复一次，或任何次数。另外一个有趣的选择是添加一些视觉线索的鼠标点击。选择文件名，然后按保存。
Make sure that you enter at least 20 fps in the bottom left edit box, otherwise the recording will be low quality. Press record. A dialog will first appear, and you choose here whether you want your gif to be in an infinite loop, or just repeated once, or any number of times. Also an interesting option is to add some visual clues for mouse clicks. Choose also filename, and press Save.
现在你可以做任何你必须做的事来触发动画。我按了几个按钮分组和堆叠。在我决定了，我按下停止。结果文件是：
>
Now you do whatever you have to do to trigger animations. I pressed several times buttons Grouped and Stacked. After I decided its enough, I pressed Stop. Resulting file is:
就是这样！
这篇关于记录并将SVG动画保存为动画GIF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
