带有MxN矩阵的jQuery动画

Question

我将一个元素拆分成多个块（由多个行和列定义），然后淡化这些块以创建动画效果。该类型的动画是由delay()值决定：

$('.block').each(function (i) { 
    $(this).stop().delay(30 * i).animate({ 
    'opacity': 1 
    }, { 
    duration: 420 
    }); 
}); 

在这种情况下，每个块的淡入淡出效果是由（30 *当前块索引）延迟。第一个块得到0延迟，第二个块30延迟，.....最后一个块30 *（块数）延迟。所以这会水平淡化所有块。

我已经发布了一个我到目前为止已经出现的效果列表：http://jsfiddle.net/MRPDw/。

我需要帮助是找到一个螺旋式效果器的延迟表现，而且你想，也许别人是可能的：d

Answer 1

这里为螺旋图案的代码的示例：

case 'spiral': 
    $('.block', grid).css({ 
     'opacity': 0 
    }); 
    var order = new Array(); 
    var rows2 = rows/2, x, y, z, n=0; 
     for (z = 0; z < rows2; z++){ 
      y = z; 
      for (x = z; x < cols - z - 1; x++) { 
       order[n++] = y * cols + x; 
      } 
      x = cols - z - 1; 
      for (y = z; y < rows - z - 1; y++) { 
       order[n++] = y * cols + x; 
      } 
      y = rows - z - 1; 
      for (x = cols - z - 1; x > z; x--) { 
       order[n++] = y * cols + x; 
      } 
      x = z; 
      for (y = rows - z - 1; y > z; y--) { 
       order[n++] = y * cols + x; 
      } 
     } 

    for (var m = 0; m < n; m++) { 
     $('.block-' + order[m], grid).stop().delay(100*m).animate({ 
      opacity: 1 
     }, { 
      duration: 420, 
      complete: (m != n - 1) || 
       function() { 
        alert('done'); 
       } 
     }); 
    } 
    break; 

看到它在this fiddle工作。

我还对“RANDOM”动画进行了改进，以显示所有正方形，而不仅仅是一个子集。代码为：

case 'random': 

    var order = new Array(); 
    var numbers = new Array(); 

    var x, y, n=0, m=0, ncells = rows*cols; 
    for (y = 0; y < rows; y++){ 
     for (x = 0; x < cols; x++){ 
      numbers[n] = n++; 
     } 
    } 
    while(m < ncells){ 
     n = Math.floor(Math.random()*ncells); 
     if (numbers[n] != -1){ 
      order[m++] = n; 
      numbers[n] = -1; 
     } 
    } 

    $('.block', grid).css({ 
     'opacity': 0 
    }); 

    for (var m = 0; m < ncells; m++) { 
     $('.block-' + order[m], grid).stop().delay(100*m).animate({ 
      opacity: 1 
     }, { 
      duration: 420, 
      complete: (m != ncells - 1) || 
      function() { 
       alert('done'); 
      } 
     }); 
    } 

    break; 

看到它的工作this fiddle。

Answer 2

也许考虑做一个螺旋动画的最简单的方法，就是想关于你的矩阵作为一张纸。

如果将x和y中心轴的纸张折叠2倍，则最终会得到更小的方形（或矩形）象限。

现在，如果您只从右下角到左上角为这个象限生成动画（就像你为'对角反转'所做的那样），你可以将此运动传播到其他3个象限以获得将动画从矩阵中心运行到四角的最终效果。

case 'spiral': 
    $('.block', grid).css({ 
     'opacity': 0 
    }); 
    n = 0; 
    var center = { 
     x: cols/2, 
     y: rows/2 
    }; 
    // iterate on the second quadrant only 
    for (var y = 0; y < center.y; y++) 
     for (var x = 0; x < center.x; x++) { 
      // and apply the animation to all quadrants, by using the multiple jQuery selector 
      $('.block-' + (y * rows    + x) +   ', ' + // 2nd quadrant 
       '.block-' + (y * rows    + cols - x - 1) + ', ' + // 1st quadrant 
       '.block-' + ((rows - y - 1) * rows + x) +   ', ' + // 3rd quadrant 
       '.block-' + ((rows - y - 1) * rows + cols - x - 1)    // 4th quadrant 
      , grid).stop().delay(100 * (center.y - y + center.x - x)).animate({ 
        opacity: 1 
       }, { 
        duration: 420, 
        complete: function() { 
         if (++n == rows * cols) { 
          alert('done'); // fire next animation... 
         } 
        } 
       }); 
     } 

这里是demo（单击螺旋链接）