Руководство по методу jQuery animate()

jQuery – прекрасная библиотека, существенно разнообразившая в последние годы подходы разработчиков к решению стоящих перед ними задач. При появлении jQuery CSS не могла создавать сложные анимации; для их создания использовался JavaScript. jQuery упростила создание анимации на порядок. Библиотека содержит простейшие анимации (fadeIn(), hide(),slideDown() и т.д.) и позволяет создавать любую анимацию с помощью метода animate(). Описанию этого метода и посвящена эта статья.

jQuery animate() - метод-оболочка, то есть работает с заранее выбранным набором элементов DOM, обернутых jQuery. Метод позволяет применять требуемые эффекты анимации к элементам в наборе. Осуществление вышесказанного на практике делается возможным благодаря наличию набора свойств CSS и значений, которые эти свойства примут по завершении исполнения анимаций. Промежуточные значения, которые стиль будет иметь по достижении желаемого эффекта (автоматически контролируемые анимационным движком), определяются продолжительностью эффекта и функцией-easing; две эти опции будут рассмотрены ниже.

Список подвергающихся анимации свойств CSS ограничивается теми, которые могут принимать численные значения. Значения могут быть абсолютными (например 200), или относительными. При абсолютных значения используемая по умолчанию единица jQuery – пиксели. Мы также можем использовать специфические единицы: em, rem или проценты. Чтобы задать относительные значение используются префиксы += или -=; префиксы направляют целевое относительное значение в положительном или отрицательном направлении, соответственно.

Параметры и сигнатура метода animate()

Метод имеет две основные формы; большинство используемых параметров необязательные (заключены в квадратные скобки).

• animate(properties[, duration][, easing][, callback])
• animate(properties[, options])

Собственно, параметры:

• properties (Объект): список css-свойств, содержащий достигаемые в конце анимации значения.
• duration (Число|Строка): продолжительность эффекта в миллисекундах или одна из заранее установленных строк: “slow” (600ms), “normal” (400ms), или “fast” (200ms). Значение по умолчанию – “normal”.
• easing (Строка): Используемое при переходе (transition) имя функции-easing (которая определяет изменение скорости анимации). Значение по умолчанию “swing”.
• callback (Функция): Функция, исполняемая по завершении анимации для каждого анимированного элемента.
• options (Объект): объект, содержащий набор свойств (дополнительные опции), которые будут переданы методу. Доступны следующие свойства:
  • always (Функция): функция, вызываемая по завершении анимации или когда исполнении анимации останавливается (но не завершается).
  • complete (Функция): исполняемая функция по завершении анимации.
  • done (Функция): вызываемая по завершении анимации функция.
  • duration (Строка|Число): описана выше.
  • easing (Строка): описана выше.
  • fail (Функция): исполняется при неудачной попытке анимации.
  • progress (Функция): Исполняется после каждого шага анимации. Вызывается один раз для каждого элемента после исполнения его анимации.
  • queue (Boolean): когда анимацию надо поместить в очередь эффектов/функций (effects queue (подробности ниже). Значение по умолчанию - true.
  • specialEasing (Объект): объект, параметрами которого являются css-свойства, чьими значениями являются функции-перехода
  • start (Функция): исполняется, когда анимации начинает совершаться.
  • step (Функция): функция, вызываемая для каждого анимированного свойства каждого анимированного элемента.

Термин easing используется для описания способа, который управляет обработкой и задает скорость кадров анимации. Анимация исполняется последовательно, если опция queue задана как true, и параллельно (без очереди) – если как false.

Примеры использования метода animate()

Применим этот метод на практике. Замечу, что при исполнении анимаций сложного порядка, созданных этим методом, могут возникнуть ошибки. То есть для очень сложных анимаций этот метод лучше избегать.

Одиночная анимация

Создать одиночную анимацию предельно просто, достаточно одного вызова. К примеру, нужно передвинуть элемент из одной стороны блока к другой. Чтобы проиллюстрировать эту анимацию, создадим два div элемента, один внутри другого. Стиль следующий: фон внутреннего div – красный. Код:

HTML

<div class="rectangle">
   <div class="square-small"></div>
</div>

CSS

.rectangle
{
   width: 300px;
   height: 20px;
   display: block;
   position: relative;
   border: 1px solid black;
   margin: 20px 0;
}

.square-small
{
   display: block;
   width: 20px;
   height: 20px;
   position: absolute;
   background-color: red;
}

Применим animate() и передвинем маленький квадрат из одной стороны к другой:

jQuery

$('.rectangle')
   .find('.square-small')
   .animate({
      left: 280
    }, 'slow');

Анимируется только свойство left. Продолжительность анимации - заранее заданное значение slow (600мс). Внутренний <div> (класс которого .square-small) передвигается, использую абсолютное значение. Значение выбирается в зависимости от ширины контейнера, заданного приведенным выше кодом CSS. Это решение далеко от идеального. Так, если изменить ширину контейнера, внутренний <div> не достигнет другой стороны (если ширину увеличить) или минует ее (если ширину уменьшить). Чтобы избежать этого, свойству left нужно задать значение, зависимое от расчета текущей ширины внутреннего и внешнего <div>:

jQuery

left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()

See the Pen одиночная анимация

Запускаем множественную анимацию в цикле

Исполнение ряда анимаций на одном элементе или наборе элементов не сложнее создания последовательности (цепочки) вызовов метода animate(). Опять передвинем маленький квадрат; двигаться он будет по периметру песочных часов, находящихся внутри большого квадрата (а не прямоугольника). Для создания демо используем следующую разметку:

HTML

<div class="square-big">
   <div class="square-small"></div>
</div>

Для .square-small воспользуемся приведенным CCS-кодом из предыдущего примера. Стиль внешнего квадрата:

CSS

.square-big
{
   width: 300px;
   height: 300px;
   display: block;
   position: relative;
   border: 1px solid black;
   margin: 20px 0;
}

Последний шаг: нужно написать JavaScript код для четырех линий, образующих периметр песочных часов. Маленький квадрат анимируется начиная с его положения вверху и слева на внешнем квадрате, пока он не достигнет нижний правый угол большого квадрата. Для создания нужного эффекта маленький квадрат должен двигаться по диагонали. По достижении им нижнего правого угла его нужно переместить в нижний левый угол, затем – в верхний правый угол, и, наконец, - в начальную позицию.

Теперь зациклим анимацию, то есть сделаем так, чтобы по окончании анимации она начиналось вновь. Чтобы сделать это мы можем заключить вызов 4-х функций animate() внутри функции, которая, свою очередь, вызывается внутри другой функции. То есть создадим функцию, на которую можно ссылаться. Затем мы можем воспользоваться функцией complete и заново запустить анимацию после последнего шага.

jQuery

(function animation() {
   var options = {
      duration: 800,
      easing: 'linear'
   };

   $('.square-big')
      .find('.square-small')
      .animate({
            left: 280,
            top: 280
         },
         options
      )
      .animate({
            left: 0,
         },
         options
      )
      .animate({
            left: 280,
            top: 0,
         },
         options
      )
      .animate({
            left: 0,
         },
         $.extend(true, {}, options, {
            complete: function() {
               animation();
            }
         })
      );
})();

See the Pen Запускаем множественную анимацию в цикле

Заметьте, чтобы при вызове animate() не писать одни и те же параметры по несколько раз, была использована переменная options. Кроме того на последнем шаге обратимся к функции complete() посредством метода JQuery extend().

Больше функций обратного вызова

Также как в нашем последнем примере зададим свойства start, complete, и progress посредством параметра options (второй параметр из второй формы). Цель – отключить кнопку, нажатие по которой запускает анимацию, когда анимация (уже) выполнена. Вторая задача – показать в процентном соотношении, какая часть от общего выполнения анимации была исполнена. Для этого примера используем первую демку с внесенными в нее необходимыми правками.

Чтобы сделать возможным показ процентного соотношения, создадим кнопку и элемент (span). Разметка:

HTML

<div class="rectangle">
   <div class="square-small"></div>
</div>
<button id="animation-button">Run!</button>
<span id="percentage">0</span>%

Стиль не меняется, поэтому сразу перейдем к обсуждению JavaScript кода. Чтобы анимация запускалась только при нажатии на кнопку, создадим обработчик событию click кнопки. Внутри обработчика включение и отключение кнопки осуществляется методом jQuery prop() ( prop на jquery.page2page). Метод основан на зависимости от того, исполняется ли анимация в данный момент или уже исполнена. Наконец, использован второй аргумент у метода progress, который, в свою очередь, является свойством объекта options; он показывает процентное соотношение (от общего выполнения анимации). Код:

See the Pen Больше функций обратного вызова для метода animate()

jQuery

$('#animation-button').click(function() {
   var $button = $(this);

   $('.rectangle')
      .find('.square-small')
      .animate({
            left: 280
         },
         {
            duration: 2000,
            start: function() {
               $button.prop('disabled', true);
            },
            complete: function() {
               $button.prop('disabled', false);
            },
            progress: function(animation, progress) {
               $('#percentage').text(Math.round(progress * 100));
            }
         }
      );
});

Заключение

Был рассмотрен jQuery animate() метод, показаны его сигнатура и принимаемые им параметры. Статья привела три примера использования анимации. Конечно, возможности animate() гораздо шире рассмотренных здесь. Если приложить усилия и подойти к созданию анимации с творческим подходом, то результат может быть действительно впечатляющим. Как, например, этот jQuery плагин Audero Smoke Effect, создающий эффект дыма для одного или нескольких элементов (обычно изображений) веб-страницы.

Источник