螺旋矩阵的动画外观

Question

我有一个充满螺旋矩阵的隐藏表。我需要延迟地逐个显示每个单元格。 首先，我想填充从 0,0 到机器人(0，边缘(的行 ->右 ->顶部。 然后我想制作 2 个 func LeftAndBot 和 RightAndTop。它为我工作没有设置超时。 但是我不明白如何使用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 行，以及代码如何将移动和打印逻辑"外包"给外部函数。