Question

以下代码创建一个40 x像素的10 x 15网格。我希望能够将方块分组成行，以便以后制作动画。具体来说，我想动画下降到底部的行，然后将动画矩阵变换应用于它们。最终，他们将在新位置复制相同的网格。

 <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

如果你没有存储对构成一行的正方形的引用，你将难以为各行设置动画（可能这是未使用的squares[]数组的用途......）

每次致电paper.rect时，都会将结果分配给squares[]

中的元素

然后你可以有一个函数，它接受你的数组的给定行并将Raphael的.animate应用到每个方块 - 给人的印象是整个行都是动画的。

http://raphaeljs.com/reference.html#Element.animate

在回复您的评论时 - 您可以向Raphael set添加元素，然后为set -eg设置动画...

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

var rowSets = [];

// *** GRID CONSTRUCTION CODE STARTS ***///
// I have swapped the usage of i and j within the loop so that cells
// in a row are drawn consecutively. 
// Previously, it was column cells which were drawn
// consecutively
for (var i = 0; i < rows; i++) {
    //create a new set which will hold this row
    rowSets[i] = paper.set();
    squares[i] = [];

    // Begin loop for cells in row
    for (var j = 0; j < cols; j++) {

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

      // For every column and row, a square is drawn at an (x,y) location 
      var newRect = paper.rect(x,y,squareSize,squareSize); 
      // add the new cell to the row
      rowSets[i].push(newRect);
      squares[i][j] = newRect;
    }
}
// *** GRID CONSTRUCTION CODE ENDS ***

squares[5][5].attr({fill : '#f00'});            // colour an individual cell
rowSets[6].attr({fill : '#00f'});               // colour an entire row                 
rowSets[6].animate({y : 10 * squareSize},400);  // animate an enitre row

这意味着您可以构建set行（和列）并将它们设置为单独的单位。

<强>更新

作为拉斐尔set只是一种将元素联系在一起的方式，以提供一种简单的方法来集体应用操作。不的工作方式与Visio中的“Group”相同 - 例如，它们仍然是单独的元素，并且将独立动画。

拉斐尔找不到set的中心进行旋转。该组的每个元素都将围绕自己的中心旋转。

使用path一次将整行定义为SVG path可以解决此问题。但是，这意味着行现在是“一个实体”，您将无法处理一个单元格或一列。但是，您可以在执行转换之前将单个单元格切换为“行路径”。希望用户/玩家不会注意到。

您可以使用以下代码替换// *** GRID CONSTRUCTION ***代码，以将行构建为路径... (JSFiddle Demo)

//Build a row path - this path will be used as the basis of all the rows
var sPath = "lpw 0 l0 sq l-pw 0 l0 -sq " //outline of the whole row
for (var cell = 1; cell < cols; cell++){
    sPath += "msq 0 l0 sq Z ";           //insert an "upright" cell separator
};    
sPath = sPath.replace(/sq/g,squareSize).replace(/pw/g,paperWidth);

//we have no 'for' loop for columns now as we are creating entire row .paths
for (var j = 0; j < rows; j++) {

    //we apply the 'M' (Move) offset here to the beginning of the path
    //This is simply to adjust the Y-offset of the start of the path
    //ie to put the the path in a new row position
    rowSets[j] = paper.path("M0 " + j * squareSize + sPath); 
}

Answer 2

您可以使用二维数组[row][column]跟踪元素。然后迭代一行中的每一列以获得适当的元素;然后只是动画他们。请注意，您需要在看台时交换i / j;目前您正在构建[column][row]。

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

如何在此raphael画布上对各行进行分组和动画处理？

2 个答案: