Анимировать камеру по нескольким безье дорожкам в AS3 / Обработка / D3?

Question

У меня есть визуализация сетевого графика, созданная с использованием Gephi, содержащая множество узлов и ребер. Мне нужно создать анимацию камеры (или движущегося фрагмента ролика), чтобы «пролетать» сеть по пути кривых Безье, посещая каждый (не обязательно каждый) узел случайным образом. Я сделал быструю анимацию , как это будет выглядеть .

Как я могу достичь этого программно через AS3 или Processing или используя библиотеку javascript mbostock D3 на github?

Моя попытка в AS3 до сих пор заключалась в том, чтобы преобразовать SVG, созданный gephi, в код AS3, используя инструмент Миллера Х. Борхеса Медейроса , а затем попытаться адаптировать более подходящую библиотеку анимации, такую ​​как пример Зе Фернандо, но я У меня трудности.

Преобразователь Медейроса разбивает квадратичные Безиры на 4 отдельных квадратичных Безье, и я не уверен, как преобразовать метод flashTo в Flash в массив точек Безье, как в коде Фернандо.

Тогда возникает проблема анимации камеры только через те узлы, которые связаны друг с другом.

Есть идеи? Спасибо за вашу помощь с этим !! ..

Answer 1

Я раньше не пользовался Gephi, но отвечал на подобный вопрос раньше.Задача состояла в том, чтобы анимировать объекты на путях, экспортированных из Illustrator.Мое решение состояло в том, чтобы использовать FXG и LibSpark as3 FXGParser и вычислить класс библиотеки для экспорта координат пути в качестве анимации TweenLite.

Это может применяться / адаптироваться к вашему примеру, но, вероятно,с использованием SvgParser :

svn export http://www.libspark.org/svn/as3/SvgParser

Я предпочитаю TweenLite , поскольку он более современный (Tweener больше не разрабатывается).Тем не менее, если вы предпочитаете Tweener, применяется тот же принцип, поскольку обе библиотеки анимации движения используют квадратичные кривые Безье для анимации пути.Вы можете узнать больше о анимации пути Tweener здесь .Если это помогает, у wonderfl есть еще один пример .

Пока у вас есть координаты кривой (вы упомянули, что вы можете рисовать с помощью curveTo), вы также можете анимировать эти кривые.