Animation 如何将d3.js动画导出到矢量帧以创建后效序列？_Animation_D3.js_Transition_Adobe Illustrator_After Effects

Animation 如何将d3.js动画导出到矢量帧以创建后效序列？

animation d3.js

Animation 如何将d3.js动画导出到矢量帧以创建后效序列？,animation,d3.js,transition,adobe-illustrator,after-effects,Animation,D3.js,Transition,Adobe Illustrator,After Effects,我正在使用d3.js创建一些基本动画，例如显示两组数据之间转换的条形图动画。最后，我想把这个动画带到Adobe AfterEffects中，作为更大视频的一部分。我想将web动画导出为一系列矢量帧ai或svg，或者png（如果需要）以导入After Effects或Illustrator。我该怎么做？谢谢这实际上可能与d3.js进行转换的方式非常简单！由于d3.js直接更改DOM元素以进行转换，因此只需每隔1/30秒保存一次DOM元素。下面是一个完整的示例： <html> &

我正在使用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文件中，而不是像上面的示例那样将它们输出到控制台。我还没有试过，但也许可以用类似的东西。然后可以选择使用ImageMagick之类的工具将.svg文件转换为.png文件。

update:我正在基于此开发一个解决方案。到现在为止，一直都还不错。我在html中使用setInterval调用form.submit，然后perl脚本使用svg节点的数据创建一个文件下载。问题是，我每秒需要30帧/文件，到目前为止，脚本的运行速度似乎还不太快。如果我尝试从一秒钟的动画制作30个文件，我的下载文件夹中只会有6到7个文件。您在实现方面取得了更多的进展吗？我正试图找到一个类似的解决方案，但到目前为止，我找到的最接近的解决方案使用node.js、PhantomJS、jsdom等来保存动态创建的SVG，但我认为它们不考虑转换。。。e、嗨，有什么消息吗？我也想实现这一点。也许我们可以一起做更多。我自己偶然发现了这一点，我有一些想法。我想我应该检查一下是否有其他人有一个存储库，这样如果我有时间开始自己的工作，我就不会重复工作。注意ImageMagick并不总是正确地转换svg文件。请看我上面的答案并添加了最后一步，请查看我的bl.ock。这将每隔1/40秒保存svg，以对应于After Effects中的25fps帧速率