螺旋矩阵的动画外观

Question

我有一个填充螺旋矩阵的隐藏表格。我需要延迟显示每个单元格。 首先，我想填充从0,0到bot（0，edge） - > right - > top的行。 然后，我想使2 func LeftAndBot和RightAndTop。它的工作对我来说没有setTimeout。 但我不能理解如何使它setTimeout一个接一个的外观。

spiralArray = function (edge) { 
     var arr = Array(edge), 
      x = 0, y = edge, 
      total = edge * edge--, 
      dx = 1, dy = 0, 
      n = 1, m = 1, 
      i = total, j = 0; 
     while (y) { 
      arr[--y] = []; 
     } 
     i = total+1; 

     while (total > 0) { 
      g = String(total--); 
      if (g.search('6') != -1) { 
       i++; 
      } 

     } 
     console.log(i) 
     while (i > 0) { 
      if (String(i).search('6') != -1){ 
       arr[y][x] = --i; 
       i--; 
      } else { 
       arr[y][x] = i--; 
      } 
      x += dy; y += dx; 
      if (++j == edge) { 
       if (dy < 0) {x++; y++; edge -= 2} 
       j = dx; dx = -dy; dy = j; j = 0; 
      } 

     } 

     return arr; 
    } 

    // T E S T: 
    arr = spiralArray(edge = 5); 
    for (y = 0; y < edge; y++) console.log(arr[y].join()); 

    tHdr = "<table id = table >"; 
    document.write(tHdr); 
    for (i = 0; i < edge; i++) { 
     document.write("<tr>"); 
     for (j = 0; j < edge; j++) { 
      td = "<td id = "+i + "_" + j + ">"; 
      td += "</td>"; 
      document.write(td); 
     } 
     document.write("</tr>"); 
    } 
    document.write("</table>"); 
    for (i = 0; i < edge; i++) { 
     for (j = 0; j < edge; j++) { 
      document.getElementById(""+i + "_" +j).innerHTML = arr[i][j]; 
     } 
    } 
// Its work. Full bot,right,top lines. 
    $(function(){ 
     var f = function(j, i, k) { 
      if (j < edge) { 
       setTimeout(function() { 
        $("#" + j + "_" + i).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
        f(++j, i, k); 
       }, duration*100) 
      } 
      if (j == edge) { 
       if (i < edge) { 
        setTimeout(function() { 
         $("#" + (j-1) + "_" + ++i).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
         f(j, i, k); 
        }, duration*100) 
       } 
      } 
      if (i == edge-1) { 
       if (k >= 0) { 
        setTimeout(function() { 
         $("#" + --k + "_" + (i-1)).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
         f(j, --i, k); 
        }, duration* 100) 
       } 
      } 

     }; 

     x = 1, y = 1, i = 0, j = 0, k=edge-1, indent = 1, duration = 1; 
     f(j, i, k); 

     moveToLeftAndBot(edge); 
    }); 
// Its doesnt work, I dont know how to write this 
    function moveToLeftAndBot(edge) { 
     var f2 = function(j, i, intend) { 
      if(i > 1) { 
       setTimeout(function() { 
        console.log("i" + intend) 
        $("#" + j + "_" + (i-1)).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
        f2(j, --i, intend); 
       }, duration * 500); 

      } 
      if (i == 1) { 
       if (j < edge-intend) { 
        setTimeout(function() { 
         console.log(intend, i , j) 
         $("#" + (j + 1) + "_" + i).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
         f2(++j, i, intend); 
        }, duration * 500) 
       } 
      } 
     }; 
     j = 0, i = edge - 1; intend = 0; 
     for (l = 0; l < 3; l++) { 
      f2(j, ++i, ++intend); 
     } 
    } 

Answer 1

您应该将矩阵遍历逻辑与动画逻辑分开。这里是一个伪如何：

var direction = 0; // Which direction you're currently traveling: 0 = bottom, 1 = right, 2 = top, 3 = left 
var row = 0; // Which row you're currently in 
var col = 0; // Which column you're currently in 

/** 
Function which prints the current table cell and advances by 1 step in the current direction until the maxSteps is hit. Then the direction rotates and new maxSteps is calculated. 
**/ 
function PrintAndStep(stepsToTake) 
{ 
    PrintCurrentCell(); // Your HTML logic for displaying values 
    MoveToNewCell();  // Changes row or col to new values based on the direction 
    stepsToTake--;   

    if (stepsToTake == 0) // If you've reach the end of the direction 
    { 
    direction = (direction + 1) % 4; // Rotate direction 
    stepsToTake = CalculateNewNumberOfSteps(); 
    } 

    if (stepsToTake > 0) // Only continue if the rotated direction yields some steps to take 
    { 
     SetTimeout(1000, PrintAndStep(stepsToTake)); 
    }  
} 

PrintAndStep(matrixHeight); 

注意如何你只需要在你的代码和代码如何“外包”的运动和印刷逻辑函数外写一次的setTimeout线。