帶有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（單擊螺旋鏈接）