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

时间:2011-11-09 00:47:46

标签: actionscript-3 animation visualization processing bezier

我使用包含许多节点和边的Gephi生成网络图可视化。我需要制作一个摄像机动画(或移动动画片段),沿着贝塞尔曲线的路径“穿过”网络,随机访问每个(不一定是每个)节点。我已经制作了what this would look like的快速动画。

如何通过AS3或Processing以编程方式实现此功能或在github上使用mbostock D3 javascript库?

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

Medeiros的转换器正在将二次贝塞尔曲线分成4个独立的二次贝塞尔曲线,我不知道如何将弗罗斯的curveTo方法转换为费尔南多代码中的贝塞尔点数组。

然后,只有那些相互连接的节点才能让摄像机动画化。

有什么想法吗? 感谢您对此的帮助!! ..

1 个答案:

答案 0 :(得分:1)

我之前没有使用过Gephi,但之前我确实回答了similar question。 任务是为从Illustrator导出的路径上的对象设置动画。 我的解决方案是使用FXG和LibSpark as3 FXGParser并对库的类进行costumize以将路径坐标导出为TweenLite补间。

这可以应用/适用于您的示例,但可能使用SvgParser

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

我更喜欢TweenLite,因为它更新(Tweener不再开发)。 如果您更喜欢Tweener,则同样的原则也适用,因为两个补间库都使用二次贝塞尔曲线进行路径动画。您可以找到有关Tweener路径动画here的更多信息。如果有帮助,wonderfl还有另一个example

只要你有曲线坐标(你提到你可以使用curveTo绘制),你也可以补间这些曲线。