javascript - 如何在拉斐尔 Canvas 上对各个行进行分组和动画？

Question

以下代码创建一个由 40 像素正方形组成的 10 x 15 网格。我希望能够将方 block 分组为行，以便稍后制作动画。具体来说，我想对落到底部的行进行动画处理，然后对它们应用动画矩阵变换。最终他们只会在新位置复制相同的网格。

 <script type="text/javascript">

    var squares = [];
    var paperHeight = 600;
    var paperWidth = 400;
    var squareSize = 40;

    var cols = paperWidth / squareSize;
    var rows = paperHeight / squareSize;

    var paper = Raphael($("#grid-test")[0],paperWidth,paperHeight);
        for (var i = 0; i < cols; i++) {
            // Begin loop for rows
            for (var j = 0; j < rows; j++) {

              // Scaling up to draw a rectangle at (x,y)
              var x = i * squareSize;
              var y = j * squareSize;

              // For every column and row, a square is drawn at an (x,y) location 
              paper.rect(x,y,squareSize,squareSize); 
            }
        }

</script>

Answer 1

您可以使用二维数组[行][列]来跟踪元素。然后迭代行中的每一列以获取适当的元素；然后将它们制作成动画。注意，牛牛时需要交换i/j；目前您正在构建[列][行]。

http://jsfiddle.net/7ncHM/

var rowsArr = [];

for (var i = 0; i < cols; i++) {
    // Begin loop for rows
    rowsArr[i] = [];

    for (var j = 0; j < rows; j++) {

      // Scaling up to draw a rectangle at (x,y)
      var x = j * squareSize; // swap i/j
      var y = i * squareSize;

      // For every column and row, a square is drawn at an (x,y) location 
      rowsArr[i][j] = paper.rect(x,y,squareSize,squareSize);
      // draw and store directly, isn't that elegant? :)
    }
}

function animateRow(i) {
    var row = rowsArr[i];
    for(var j = 0; j < row.length; j++) { // iterate elements in row
        row[j].animate({y: 400}, 2000);
    }
}

animateRow(2);