JavaScript анимация [дубликат]

241

24 февраля 2019, 17:20

На данный вопрос уже ответили:

setTimeout: почему элементы не выводятся по очереди [дубликат] 1 ответ

У меня есть код, заполняющий окно браузера красными плитками.
Этот скрипт ищет диагональ, и должен менять цвет каждой диагонали поочерёдно с небольшой задержкой. То есть сначала левая верхняя плитка становится другого цвета затем идёт диагональ и т.д.
HTML:
<div id="tiles"></div>
CSS:

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;
}

JS:

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');
}

Я не знаю как сделать задержку, я пытался реализовать это через цикл, но ничего не вышло, потому что они сразу меняют цвет без анимации.

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
Код должен работать так, чтобы при одном прохождении цикла окрашивалась одна диагональ полностью(не по одной плитке).

Answer 1

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'); 
} 
 
var delayCounter = 0; 
for (var i = 0; i < diagonals.length; i++) { 
  for (var j = 0; j < diagonals[i].length; j++) { 
    setTimeout(function(aTile) { 
      aTile.style.backgroundColor = "green"; 
    }, delay * delayCounter++ * 100, diagonals[i][j]); 
  } 
}

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; 
}