7

我正在使用 d3.js 创建一些基本动画，例如显示两组数据之间转换的条形图动画。最终，我想将此动画带入 Adob​​e AfterEffects，以作为更大视频的一部分。我想将网络动画导出为一系列矢量帧（ai 或 svg，或必要时的 png）以导入 After Effects 或 Illustrator。我怎样才能做到这一点？谢谢！

4

1 回答 1

4

对于 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 文件。

于 2013-06-26T18:55:01.580 回答