jQuery анимация с матрицей MxN - PullRequest
Новая
       22

jQuery анимация с матрицей MxN

4 голосов
/ 01 мая 2011

Я разбиваю элемент на несколько блоков (определяемых количеством строк и столбцов), а затем исчезаю из этих блоков для создания анимационных эффектов.Тип анимации определяется значением delay(): 

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

В этом случае эффект затухания каждого блока задерживается на (30 * текущий индекс блока).Первый блок получает 0 задержек, второй блок 30 задержек, ..... последний блок 30 * (количество блоков) задержки.Таким образом, все блоки будут затухать по горизонтали.

Я опубликовал список эффектов, о которых я уже говорил, здесь: http://jsfiddle.net/MRPDw/.

Мне нужна помощь, чтобы найти задержкувыражение для эффекта спирального типа и, возможно, другие, которые вы считаете возможными: D

Ответы [ 2 ]

4 голосов
/ 02 мая 2011

Вот пример кода для спирального паттерна: 

  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;

Посмотрите, как он работает в этой скрипке .

Я также улучшил ваш "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;

Посмотрите, как это работает в этой скрипке .

1 голос
/ 01 мая 2011

Возможно, самый простой способ подумать о создании спиральной анимации - это представить свою матрицу как лист бумаги.

Если вы сложите в 2 раза эту бумагу по осям X и Y, вы получите квадратный (или прямоугольный) квадрант меньшего размера.

Теперь, если вы анимируете этот квадрант только из нижнего правого в верхний левый угол (так же, как вы делали для своего «диагонали-реверса»), вы можете распространить это движение на остальные 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... 
                        }
                    }
                });
        }

Вот демоверсия (нажмите на спиральную ссылку)

...