我正在使用 d3.js 创建一些基本动画，例如显示两组数据之间转换的条形图动画。最终，我想将此动画引入 Adobe AfterEffects 中，作为更大视频的一部分。我想将 Web 动画导出为一系列矢量帧(ai 或 svg，或 png，如果需要)以导入到 After Effects 或 Illustrator 中。我怎样才能做到这一点？ 谢谢!
最佳答案
这实际上对于 d3.js 进行转换的方式来说可能非常简单!由于 d3.js 直接更改 DOM 元素来进行转换，因此您只需每隔 1/30 秒保存 DOM 元素即可。这是一个完整的示例:
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg { border:1px solid black; }
</style>
</head>
<body>
<svg id="svg" width="480" height="240" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg><br/>
<button id="b1" type="button">Animate</button>
<script type="text/javascript">
var svg = d3.select("svg");
var b1 = d3.select("#b1");
var duration = 1000;
var nTimes = 30;
var x = new XMLSerializer();
var n = 0;
function outputToConsole() {
console.log(x.serializeToString(document.getElementById("svg")));
if(n++ >= 30)
return;
setTimeout(outputToConsole, 33); // 33 milliseconds is close to 1/30th of a second
}
b1.on("click", function() {
svg.select("circle").transition().duration(duration).attr("cx",150);
outputToConsole();
});
</script>
</body>
</html>
最后一步是将每个输出的 svg 元素保存到磁盘上的单独 .svg 文件中(而不是像上面的示例那样将它们输出到控制台)。我还没有尝试过，但可能可以使用类似 FileSaver.js 的东西。然后可以选择使用 ImageMagick 之类的工具将 .svg 文件转换为 .png 文件。
关于animation - 如何将 d3.js 动画导出到矢量帧以创建 AfterEffects 序列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16310999/