用jQuery爲NxN拼圖動畫製作解決方案

Question

我寫過一個JavaScript程序，可以生成NxN滑動拼圖拼圖的解決方案。它找到了一個正確的解決方案，但是當涉及到在不同的難題實例之間進行動畫處理以獲得解決方案時，會變得雜亂無章。起初（3-4步）瓷磚像他們應該移動，但隨後一些瓷磚開始對角地移動並在其他瓷磚上方移動。解決方案終於到了，但中間的動畫出錯了。這裏是我的動畫循環的代碼：

var steps = solution.length; 
for (i=0; i<steps; i++) { 


    next = solution.pop(); 
    // ANIMATE TILE 
    var delay = speed*i; 
     // sp is an array where the position (y, x) of the free spot is 
    var spA = current.spacePos;  
    var spB = next.spacePos; 
    var movingTile = current.box[spB[0]][spB[1]]; 
    var leftOffset = size*(spA[1]-spB[1]); 
    var topOffset = size*(spA[0]-spB[0]); 
    var thisTile = $('#tile'+movingTile); 
    thisTile.delay(delay).animate({ 
     opacity: 1.0, 
     top: "+=" + topOffset, 
     left: "+=" + leftOffset 
     }, speed); 
    // Update for next round 
    current = next; 
}; 

Answer 1

如果你想在一個動畫的時間正好與前動畫的結束（你做的）一致，那麼你就不能使用delay()調度下一個動畫。相反，您必須使用一個動畫的完成功能來觸發下一個動畫。只有這樣，時機纔算完美，即使在連續數百次動畫之後。

你可以做這樣的事情：

var current = xxx; // this has to get initalized (I'm not sure how in your code) 
function goNext() { 
    if (!solution.length) { 
     return; 
    } 

    var next = solution.pop(); 
    // ANIMATE TILE 
    // sp is an array where the position (y, x) of the free spot is 
    var spA = current.spacePos;  
    var spB = next.spacePos; 
    var movingTile = current.box[spB[0]][spB[1]]; 
    var leftOffset = size*(spA[1]-spB[1]); 
    var topOffset = size*(spA[0]-spB[0]); 
    var thisTile = $('#tile'+movingTile); 
    var current = next; 
    thisTile.animate({ 
     opacity: 1.0, 
     top: "+=" + topOffset, 
     left: "+=" + leftOffset 
     }, speed, goNext); 
} 

goNext();