在AS3 / Processing / D3中沿着多个bezier路径动画相机



我有一个使用包含许多节点和边的Gephi生成的网络图形可视化。我需要制作一个摄像机(或移动的影片剪辑)的动画,沿着贝塞尔曲线的路径"飞越"网络,随机访问每个(不一定是每个)节点。我已经做了一个快速的动画,它看起来像什么。

我如何通过AS3或处理或在github上使用mbostock D3 javascript库以编程方式实现这一点?

到目前为止,我在AS3中的尝试是使用Miller H. Borges Medeiros的工具将gephi生成的SVG转换为AS3代码,然后尝试适应bezier补间库,如Zeh Fernando的示例,但我遇到了困难。

Medeiros的转换器将二次bezier拆分为4个单独的二次bezier,我不确定如何将flash的curveTo Method转换为Fernando代码中的bezier点数组。

那么问题来了,摄像机的动画只能通过那些彼此连接的节点。

任何想法?谢谢你的帮助!!

我以前没有使用过Gephi,但我之前确实回答过类似的问题。任务是从Illustrator导出的路径上动画对象。我的解决方案是使用FXG和LibSpark as3 FXGParser,并定制一个库类来导出路径坐标为TweenLite渐变。

这可以应用/调整到您的示例中,但可能使用SvgParser:

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

我更喜欢TweenLite,因为它是最新的(Tweener不再被开发了)。如果你更喜欢Tweener,同样的原则也适用,因为这两个Tweener库都使用二次贝塞尔曲线来进行路径动画。你可以在这里找到更多关于Tweener路径动画的信息。如果有帮助的话,wonderfl还有另一个例子。

只要获得了曲线坐标(您提到可以使用curveTo进行绘制),就可以对这些曲线进行补间。

最新更新