javascript - JavaScript 动画（平铺）

Question

我有用红色瓷砖填充浏览器窗口的代码。
该脚本正在寻找对角线，并且应该稍微延迟依次更改每个对角线的颜色。也就是说，首先左上方的瓷砖变成不同的颜色，然后对角线继续，等等。

body {
  background-color: #333;
  overflow: hidden;
}

.tile {
  background-color: #993333;
  border: 1px solid #661111;
  border-width: 1px 1px 0 0;
  box-sizing: border-box;
  height: 5vh;
  width: 5vw;
  float: left;
}

var totalRows = 20;
var totalCols = 20;
var delay = 0.5; // задержка

var tiles = createTiles(totalRows, totalCols);
var diagonals = getDiagonals(tiles, totalRows, totalCols);


function getDiagonals(array, rows, cols) {
    var diagonals = [];
    for (var i = 0; i < rows + cols - 1; i++) {
        var row = 0;
        var col = i;
        var diagonal = [];
        while (col >= 0 && row < rows) {
            if (col < cols) {
                diagonal.push(array[row * cols + col]);
            }
            row++;
            col--;
        }
        diagonals.push(diagonal);
    }
    return diagonals;
}

function createTiles (rows, cols) {
    var tilesHtml = '';
    for (var i = 0; i < rows * cols; i++) {
        tilesHtml += '<div class="tile"></div>';
    }
    var tiles = document.getElementById('tiles');
    tiles.innerHTML = tilesHtml;
    return tiles.querySelectorAll('.tile');
}

<div id="tiles"> </div>

我不知道如何进行延迟，我试图通过一个循环来实现它，但没有任何结果，因为它们立即改变颜色而没有动画。

for (var i = 0; i < diagonals.length; i++) {
  for (var j = 0; j < diagonals[i].length; j++) {
    var tile = diagonals[i][j];

    tile.style.backgroundColor = "green";
  }
}

我知道这可以使用 setTimeout 来实现，但我不知道如何对二维数组执行此操作。

代码的操作必须与此类似。
1111 | 0111 | 0011 | 0001 | 0000 | 0000 | 0000 | 0000
1111 | 1111 | 0111 | 0011 | 0001 | 0000 | 0000 | 0000
1111 | 1111 | 1111 | 0111 | 0011 | 0001 | 0000 | 0000
1111 | 1111 | 1111 | 1111 | 0111 | 0011 | 0001 | 0000
代码应该以这样一种方式工作，即在一个循环周期中，一条对角线完全着色（不是在一块板上，而是在对角线的所有瓷砖上）。

标签： javascriptcssanimation

Answer 1

像这样的东西？

要实现定时 for 循环的概念，您必须使用递归。以下代码片段说明了这一点：

// Consider it as timed for(var i = 0; i < diagonals.length; i++) loop
function recursiveLoop1(i) {
  var j = 0; // initializtion

  if(i < diagonals.length) setTimeout(() => {
    recursiveLoop2(j, diagonals[i][j]); // called secondary for loop
    i++; // increment

    return recursiveLoop1(i); // called primary for loop after 100 ms
  }, 100);

  else return ; // exit condition
}

// Consider it as timed for(var j = 0; j < diagonals[i].length; j++) loop
function recursiveLoop2(j, el) {
  if(j < diagonals[i].length) setTimeout(() => {
    el.style.backgroundColor = 'green';
    j++; // increment

    return recursiveLoop2(j, el); // called secondary for loop after 100 ms
  }, 100);

  else return ; // exit condition
}

var i = 0; // initialization
recursiveLoop1(i);