5 動畫中心

Frame 產生時會負責呼叫的方法，因此 Layout 設計者可以在這裡設計自己的動 畫行為，不會一次性的被系統執行而過。

程式碼 3-5 動畫中心

動畫中心是一個管理所有實作 Animable 的類別物件的管理者。在每一個 Frame 產生時，它會藉由 animate 這個方法去執行所有向它註冊的動畫。因此，

39

要使用動畫之前，你必須讓動畫中心知道你的存在，要向動畫中心註冊，可以在 實作 Animable 的子類別的建構函式中加入一行程式碼向動畫中心註冊：

animationCenter::getInstance()->addAnimation(this);

另外，在 animate 方法的傳入參數中有一個 avgFrameTime，它是平均畫面更 新時間(Average Frame Time)，單位是秒，我們可以利用它管理動畫的速度，不 至於因為系統或主機速度而影響了動畫速度。

40

Chapter 4 Graph Layout 

Section 4.1 Graph Drawings

Graph 是在電腦科學領域中重要的資料結構。，它能夠標示集合之中各元素 之間的關係（Relation）與路徑（Path）。而 Graph 的表達方式也有很多種，例如 矩陣、集合符號、圖畫（Drawing）等等，如。

圖 4-a 左為矩陣表達法，右為圖畫

其中圖畫表示方式最不容易良好地以自動化方法產生[22][23][24]，但卻是人 類最容易理解的 Graph 表達方式。因為同樣的 Graph 在不同的需求與思考方式下 需要的（被認為好的）陳列方式也不同[22][24]，我們無法事先預想出最好的圖 畫陳列，更何況還要藉由事先被設計好的的電腦演算方式產生。

而在電腦科學中，關於 Graph 的繪圖演算法相當多，判斷所謂的好與不好牽 涉到很多不同的觀察角度與層面，但共同的瓶頸在於一旦資料數量龐大便有畫面 雜亂且運算時間特別長的情況出現[22][25]；但很幸運地，在 xDIVA 系統的 3D

41

環境之下我們比其它視覺化工具多出了額外一維的空間優勢。

Section 4.2 Graph 的陳列

有很多的研究與工具相關於 Graph 的陳列[26]。以著名的工具 Graphviz[18]

為例，Graphviz 是一個可客製化的圖形編譯器，一種能夠完整呈現有向圖的視覺 化工具。它可以在指令模式、網路端服務或者圖形化介面下執行。Graphviz 能以 圖(graph)、節點(node)以及邊(edge)三種方式組合呈現出結果。Graphviz 擁有自 己專用的敘述語言(DOT language)[19]，且使用十分嚴謹的排列演算法。使用者 必須了解 DOT 的檔案格式與語法，Graphviz 會依照語法將資料以美觀與整齊的 樣貌呈現，其演算法著眼於讓每個節點都不會重疊，而線也儘量不會跨過節點。

在使用 Graphviz 來幫我們做排版之前，程式設計師必須要先針對想要排列 的資料轉換成 DOT 語言，也就是說使用者必須自行處理資料內容與 graph 的基 本元素 node 或 edge 之間的映射 (mapping)。假如圖形非常的複雜或是節點數量 非常多的時候，因為 Graphviz 是屬於二維的視覺化工具，畫面中極有可能會佈 滿了點跟邊(圖 4-b )，對於使用者在觀看時，在了解圖的架構或內容上，必須要 多花一點時間。

這樣的結果在某些應用是不盡人意的，但盤斷一個圖畫陳列方式的好壞與各 種觀察角度和需求有關。有些研究也指出最好的陳列方式其實會依使用者習慣與

42

美感而有所不同[22]，因此本論文選擇更重視使用者的互動[23]，讓使用者可以 參與陳列的行為，能夠自行調整視覺化物件陳列的方式。

圖 4-b 節點數量多的 Graph 被 Graphviz 視覺化後的情況

不同於 Graphviz 一次將物件陳列位置計算出來的靜態方式，我們也可以利 用某些機制使資料與資料（或使用者）之間漸進式的互動與溝通，以動畫的方式 讓物件一步步移動到合適的位置，譬如在 Java 上許多人使用的 Prefuse（2.2.2）。

這樣的動態方式不僅可以避免因為資料太過複雜而使陳列演算法的運算時間過 長，也不會產生一成不變的陳列結果（如圖 4-d）。

然而欲使用 Prefuse，使用者仍然必須將自己的資料依照其 framework 之介 面格式殖入，並且需要自行撰寫部分程式碼，在使用的便利性與彈性上稍有不 足。

43

圖 4-c 同一個 Graph 在 Prefuse 中互動產生不同的結果

Section 4.3 xDIVA 中的 Layout 需求

在 xDIVA 的使用經驗中，物件之間的 Pointer 參考關係大部分的時候會被視 覺化為線狀的物體，而各物件之間複雜的 pointer 關係經過視覺化為線狀物後，

44

很自然地就形成了各種類似 Graph 的表達方式。

在 xDIVA 的設計中，當這些資料結構中有新的物件被參考到時或者物件在

xDIVA 中視覺化的位置改變(可以想像為 Graph 的結構改變)時，使用者可以自由 選擇適當的 Layout 演算法重新決定它們位置。在 xDIVA 中的這些 Layout 演算法 各有用處，使用者可以依照需求選取。而本論文論述的是其中一項 Graph Layout 演算法：彈簧陳列。將在之後的章節再仔細的說明

在工具的使用經驗中，使用者使用起來越輕鬆、直覺、方便是最好的。最起 碼是讓使用者不需要花費太多時間去閱讀說明文件（這樣通常會大大地降低使用 意願）。

我們採取的方式是讓使用者能夠利用滑鼠拖曳（Drag）動作去拖拉 xDIVA 畫面上的物件（可以想像為 Graph 上的 Vertex）。雖然單純地只移動被拖拉的物 件也可能是一種設計方式，但實用性顯然不高。而且對使用者而言，需要一個一 個 vertex 進行拖拉動作以達到他所期望的排列未免太耗時費力。

另一方面，Layout 作為 xDIVA 的一個子系統[1]，應具有其特色及達到幫助 使用者理解的作用。因此，我們在單純的物件拖曳行為上加入了更直覺性的變化，

可以幫助使用者理解各 Vertex 間的關係並且省去個別移動的時間。接下來，我 們便開始介紹彈簧陳列。

45

Chapter 5 Graph 的彈簧陳列方法 

彈簧陳列方法（Spring Layout VM）是本論文提出的一種陳列方式，它將物 件之間的「關係」模擬為自然界中的彈簧，不但可以避免物件之間的碰撞，它也 遵守虎克定理以及牛頓三大運動定律，讓 xDIVA 畫面中的移動事件能夠達到透 過關係而互相牽引移動的效果。此外，我們也加入了動畫效果，可以清楚的觀察 到在彈簧陳列啟動時，各物件的簡協運動和其它的彈簧行為。

Section 5.1 物理現象

5.1.1 移動的發生與物理學的計量

誠如前一章節所言，我們期許 xDIVA 的使用者能夠在 xDIVA 的 Layout 系統 的輔助下經由自己的想法去移動畫面中的物件，輕鬆簡單的達到自己心目中的排 列方式。

當使用者拖拉畫面上的一個可移動的物件時，該物件想當然耳，將會移動。

但我們希望這個移動事件發生時，我們可以為使用者做的更多：也許使用者希望 畫面中與該物件有參考關係（二元關係）的物件可以一起被移動，如此物件的關 係可以一目了然，更迅速的了解資料並省去一一進行拖拉的心力。或者，也許使 用者希望物件之間彼此不要重疊，我們也可以在移動物件的過程中幫助使用者避

46

免之。當然，我們不預設使用者需要任何多餘的功能，使用者可以任意啟動或者 關閉這些輔助功能。

為了達成這些物件移動的相關功能，我們必須更深入解析物件的移動。在本 論文中，我們將使用物理學的計量方式去分析物件的移動。

5.1.2 位移

圖 5-a 「位移」的示意圖

在物理學上，位移指的是目前點（目前位置）與參考點（舊位置）的差異，

是一個向量。位移的大小等於參考點到目前點的直線距離，方向從參考點指向目 前點。

5.1.3 速度

當參考點是物體的舊位置時，位移向量表示出物體運動的狀況：向量由舊位 置指向目前位置。 這種用法能夠定義物體的速度向量與加速度向量。在物理學 上，我們通常使用

ｖ

位移隨時間的變化率即是速度，或者說是，單位時間內的位移。

47

5.1.4 加速度

如同位移與速度的關係。我們可以將加速度解釋為「速度隨時間的變化率」

或者，單位時間內的速度變化。在物理學上，我們通常使用

ａ

5.1.5 資料結構：位置移動狀態 PositionMoveState

很顯然的，以上的物理現象都可以關聯到 VM 物件位置移動的變化。因此，

我們也需要利用一個型別去說明「位置移動」，當然，它必須能夠表達一個移動 的方向與大小：