录制 SVG 动画并将其保存为动画 GIF [英] Recording and saving an SVG animation as an animated GIF
问题描述
是否有用于将 SVG 动画录制和保存为动画 GIF 的库或工具?
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屋！
