如何将d3.js动画导出为矢量帧以创建AfterEffects序列？

Question

如何将d3.js动画导出为矢量帧以创建AfterEffects序列？

animationd3.jstransitionadobe-illustratorafter-effects

7

我正在使用d3.js创建一些基本的动画，比如柱状图动画，展示两组数据之间的过渡。最终，我想将这个动画带入Adobe AfterEffects，作为更大视频的一部分。我想将网页动画导出为一系列向量帧（ai或svg，如果必要的话也可以是png），以便导入After Effects或Illustrator。我该如何做？谢谢！

- Carrie

更新：我正在基于这个示例解决问题。目前为止还不错。我在我的HTML中使用setInterval()调用form.submit，然后perl脚本使用来自svg节点的数据创建文件下载。问题是我需要每秒30帧/文件，到目前为止看起来脚本无法以那么快的速度运行。如果我尝试从1秒动画中制作30个文件，我只会在我的下载文件夹中得到大约6或7个文件。 - Carrie

你的实现进展如何？我正在尝试寻找类似的解决方案，但到目前为止，我发现最接近的解决方案使用像node.js、PhantomJS、jsdom等工具来保存动态创建的SVG，但我不认为它们考虑了过渡效果...(例如：这个解决方案)。 - t2k32316

嗨，这方面有什么消息吗？我也想实现这个。或许我们可以一起做得更多。 - VividD

刚刚偶然发现了这个，我有几个想法。想看看是否有其他人已经建立了存储库，这样如果我有时间开始自己的工作，就不会重复劳动了。 - Josh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- t2k32316 · Accepted Answer

这实际上可能很简单，因为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文件。