Как экспортировать анимацию d3.js в векторные кадры для создания последовательности AfterEffects?

Question

Как экспортировать анимацию d3.js в векторные кадры для создания последовательности AfterEffects?

Я создаю некоторые базовые анимации с использованием d3.js, такие как анимации гистограммы, которые показывают переход между двумя наборами данных. В конечном счете, я хочу перенести эту анимацию в Adobe AfterEffects, чтобы включить ее в видео большего размера. Я хочу экспортировать веб-анимацию в виде серии векторных фреймов (ai или svg, или png, если необходимо) для импорта в After Effects или Illustrator. Как я могу это сделать? Спасибо!

7

animation d3.js transition adobe-illustrator after-effects

Источник

user1735883 01 май '13 в 00:22

1 ответ

Решение

Другие вопросы по тегам animation d3.js transition adobe-illustrator after-effects

user229311 26 июн '13 в 18:55 2013-06-26 18:55 · Accepted Answer · 2013-06-26 18:55

На самом деле это может быть довольно просто, если d3.js выполняет переходы! Поскольку d3.js напрямую изменяет элементы DOM для выполнения переходов, вы можете просто сохранять элементы DOM каждую 1/30 секунды. Вот полный пример:

<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. Затем, при желании, файлы.svg можно преобразовать в файлы.png, используя что-то вроде ImageMagick.