7

2 つのデータ セット間の遷移を示す棒グラフ アニメーションなど、d3.js を使用していくつかの基本的なアニメーションを作成しています。最終的には、このアニメーションを Adob​​e AfterEffects に取り込み、より大きなビデオの一部として含めたいと考えています。Web アニメーションを一連のベクター フレーム (必要に応じて 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 に答える