使用Javascript動畫算法

我想弄清楚如何爲JavaScript中的算法制作動畫。更一般的是，在其他語言（如Java）中如何完成算法動畫？動畫方面與算法邏輯分開嗎？所以，例如，我有我的排序算法工作，我會有一個特殊的動畫對象，只是「觀察」任何變化的問題列表的狀態，或者是算法邏輯中的通知動畫對象的片段修改列表並調用必要的動畫方法？使用Javascript動畫算法

回到JavaScript，在這種情況下，我實現了一個可以工作的霍夫曼編碼算法;我試圖做的唯一事情就是製作一個伴隨的動畫來演示它實際上在做什麼。到目前爲止，我的方法是使用d3庫或jquery作爲動畫，唯一困難的是如何從我的算法代碼中實際調用任何動畫例程。

我知道它在JavaScript中不可能暫停執行一行代碼（或等待）來完成動畫。

有關解決此問題的最佳方法的任何建議？

編輯： 例如，下面的代碼構建元件的隊列中，並且我想進行動畫顯示隊列被構建爲它的這樣做：

var i,j; 
var input = $('#input').val(); 
var input_array = input.split(''); 
for (i=0; i<input_array.length; i++){ 
    var temp = new Node(input_array[i], 1); 
    for (j=i+1; j<input_array.length; j++) { 
     if (input_array[j] == input_array[i]) { 
      temp.frequency++; 
      input_array.splice(j, 1); 
     } 
    } 
    Queue.push(temp); 
}

來源

2013-01-24 Genu

你想要做什麼動畫？ Gots任何html/css/javascript？讓我們看看你迄今爲止嘗試過的[jsFiddle]（http://jsfiddle.net）。 – Chad

例如，我想動畫這段代碼創建一個隊列。 http://jsfiddle.net/ZNrFh/ – Genu

不可能暫停執行一行代碼或等待動畫完成。

是的，這是真的，因爲JS中的動畫是異步的。你有2個選擇：

使你的算法也是異步的。這將是一個函數，它獲取算法的當前狀態並在一步後返回狀態（和/或可能是步驟本身，因此可以選擇匹配的單個動畫）。然後每次從動畫循環中調用step函數。
維護一個動畫隊列（我猜你的庫有輔助函數）。然後按照原樣運行算法，並在每個步驟鏈中在隊列末尾執行另一個要執行的動畫。一旦算法運行，啓動動畫隊列。

選項1是更優雅，但當然更復雜 - 所有環路將需要成爲遞歸函數等等。但是這是唯一的可能性，如果你的算法是不終止，或選項＃動畫隊列2會變得太長（和記憶力）。

來源

2013-01-25 11:15:23 Bergi

我將嘗試動畫隊列，看看它是如何工作的，因爲它似乎需要對邏輯進行最少量的更改/流的算法，並且我認爲它將在將算法邏輯與動畫演示分開時起到最好的作用。然而，就像你說的那樣，即使隊列在擴展時被佔用，內存也可能成爲問題。也許是一種混合方法？例如，因爲霍夫曼有多個階段。可能將這些常規操作設爲原子操作，以便在每個主要步驟中暫停執行，以便動畫隊列可以恢復到更合理的長度。 – Genu

是的，我相信一種混合方法是可能的。然而，我不認爲記憶真的成爲任何合理例子的問題。 – Bergi

在JavaScript模擬動畫，您可以隨着時間的推移修改內聯樣式屬性。

例如，做一個div元素向右移動線，你可能會做這樣的事情：

var div = document.getElementById("some-div"); 

//This would normally be done elsewhere 
div.style.position = "absolute"; 
div.style.width = "100px;" 
div.style.height = "100px;" 
div.style.left = "0px"; 

//Called every 30 milliseconds 
function animate() { 
    div.style.left = (parseInt(div.style.left,10) + 5) + "px"; 
    setTimeout(function() { 
     animate(); 
    }, 30); 
} 
animate();

不過，我建議你考慮使用CSS3 transitions或animations，因爲它分離來自演示文稿的網站邏輯並使用更少的代碼。

來源

2013-01-24 22:51:11

但是，如果您查看修改後的問題，我將如何將執行的代碼與我的動畫進行匹配？有問題的代碼會在2秒內執行，但是，我想通過動畫來說明執行情況。 – Genu

@Eugen如果'CSS3'是一個選項，您可以使用'transition-delay'屬性，並通過改變必要的屬性來爲元素設置動畫。例如，如果簡單地設置了'el.style.top'，那麼一個以'10px'的'top'屬性開頭且具有定義的轉換的元素將平滑地變爲'50px'。不幸的是，我不完全理解你打算如何用上面的示例代碼來完成動畫元素。我建議你看看發佈的鏈接。 –

我對我的問題表示歉意，並沒有我希望的那麼清楚。基本上，在給出的例子中，我遍歷一個數組，併爲每個元素創建一個Node對象。仔細看看這個邏輯，我想通過在屏幕上繪製一個圓圈來說明這個過程，並在該圓圈內使用元素信息。最後一行，將Node對象推入隊列。同樣，我會以某種方式爲以前創建的圓圈創建動畫，以將其表示爲屬於隊列。圖紙將在svg中製作，因爲它更容易處理動畫等。我希望更清楚。 – Genu

現在這是一個非常廣泛的問題的答案，但我會試圖掩蓋它的某些方面..

ID喜歡先從動畫製作..

通常你會被操縱一些元素的CSS，以便它看起來像一個動畫.. 我會玩螢火蟲和增加一個div元素的寬度，如果我繼續拿着向上的箭頭，它會看起來像它的擴展..更多，複雜的動畫涉及更多的方面.. JQuery庫爲您提供一些非常酷的動畫開箱，並有更先進的看到這裏是一個簡單的淡出動畫，如果林不打算使用jQuery的淡出（）函數

var op = 1; // set opacity to one 

setInterval(function(){ 
    op = op - 0.1 // decrease the opacity by 0.1 
    $('div').css({opacity : op }); // selecting the element an apply the css on it 
},50) // over an interval of 50 ms

現在關於停止動畫或暫停它，沒有什麼是不可能的... 與以前的動畫這裏有一個例子.. http://jsfiddle.net/9SaKL/1/

更多更酷的東西可以做..但這只是一個蹩腳的例子（不適用於現實生活中的項目哈哈）

請注意，沒有重新邀請輪的使用只需使用基本組合就可以完成大量動畫

I realize that its not really possible in JavaScript to pause execution at a line of code (or wait) for an animation to complete.

完全錯誤，鏈接基本上是在現實生活中瓦亭的一個函數來完成，然後做其他的... 結算的間隔停止..

，如果有時間，有一些可以按時完成的事情，那麼你可以加快速度，或使速度變慢，或者你可以阻止它，（除了時間吧？）

來源

2013-01-24 23:05:57

使用Javascript動畫算法

回答

相關問題