在AS3/Processing/D3中沿多個貝塞爾路徑動畫攝像機？

我有一個使用包含許多節點和邊緣的Gephi生成的網絡圖可視化。我需要製作一個攝像機的動畫（或者動畫片段）以沿着貝塞爾曲線的路徑「飛越」網絡，隨機訪問每個節點（不一定是每個節點）。我做了一個what this would look like的快速動畫。在AS3/Processing/D3中沿多個貝塞爾路徑動畫攝像機？

如何通過AS3或處理或在github上使用mbostock D3 javascript庫來實現此目的？

到目前爲止，我在AS3中的嘗試一直是使用Miller H. Borges Medeiros' tool將gephi生成的SVG轉換爲AS3代碼，然後嘗試調整一個貝塞爾補間庫，例如Zeh Fernando的示例，但是我遇到了困難。

Medeiros的轉換器將二次貝塞爾分解爲4個獨立的二次貝塞爾曲線，我不確定如何將Flash的curveTo方法轉換成費爾南多代碼中的貝塞爾點陣列。

然後存在通過僅相互連接的那些節點動畫攝像機的問題。

任何想法？謝謝你的幫助!! ..

來源

2011-11-09 MachuPichu

我以前沒有用過Gephi，但是我以前回答過similar question。該任務是爲從Illustrator導出的路徑上的對象設置動畫。我的解決方案是使用FXG和LibSpark as3 FXGParser並且需要花費一定的庫來將路徑座標導出爲TweenLite補間。

這可以適用/適應你的榜樣，但可能與使用SvgParser：

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

我喜歡TweenLite因爲它更高達日期（中間人沒有被開發了）。不過，如果您更喜歡Tweener，則同樣的原理適用於補間庫使用二次貝塞爾曲線進行路徑動畫。你可以找到更多關於Tweener路徑動畫here。如果有幫助，wonderfl還有另一個example。

只要你有曲線座標（你提到你可以使用curveTo繪圖），你也可以在這些曲線上補間。

來源

2011-11-09 22:00:28

謝謝喬治！這正是我所追求的。但是我已經使用之前發佈的AS3SWF方法示例，並且補間不完全匹配所有曲線上的路徑。球在某些部分偏離了一點，這隻有在路徑很大時纔會發生。這是[我的測試]（http://www.xime.com.au/graph-animation/AS3SWF.swf）。我只是在移動路徑而不是球。有什麼想法嗎？另外，我想知道如何以正確的順序解析路徑，以便從一個節點到另一個遠離未連接節點的突然跳躍？ – MachuPichu

嘿，這是很大的進步！我沒有完全理解AS3SWF解析ShapeTags的順序，這就是爲什麼我建議看看SvgParser（可能修改[Path.as]（http://www.libspark.org/browser/as3/SvgParser /trunk/src/svgparser/parser/Path.as），因此它會根據繪圖命令（MOVE_TO - tween to，CURVE_TO - bezier to等）生成一些Tweener/TweenLite代碼。有一個Sample.as開頭，但它將有助於更深入地瞭解Path.as並跟蹤/調試形狀以查看曲線的解析順序。我想它可以方便地存儲那些...... –

... to tween say from nodeA到nodeB（這些可能是這樣） –

在AS3/Processing/D3中沿多個貝塞爾路徑動畫攝像機？

回答

相關問題