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

Jis*_*ike 23 svg gif animated-gif css3 d3.js

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

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

Viv*_*idD 25

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

这是(几乎逐字)我上述问题的程序:

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

  1. 在这里下载LICEcap 并安装它.现在,如果你启动这个程序,它会有一个相当不寻常的形状,只是一个很薄的框架,框架内的所有东西都是透明的: 在此输入图像描述

  2. 使用d3.js动画转到窗口并准备好所有内容,以便您可以在某个时刻开始动画.让我们说我们想从d3js.org记录这个例子: 在此输入图像描述

  3. 现在启动LICEcap并将其放置在动画gif中您想要的区域: 在此输入图像描述

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

  5. 现在,您可以执行任何操作来触发动画.我按了几次按钮Grouped and Stacked.在我做出足够的决定后,我按下Stop.产生的文件是: 在此输入图像描述

而已!

  • 感谢分享这个,非常有用! (2认同)
  • 我想看到另一个解决方案.想要在SVG中屏幕捕获透明度时会发生什么? (2认同)