jQuery — прекрасная библиотека, и за многие годы она изменила подход тысяч разработчиков к своим проектам. Когда jQuery был создан, CSS не смог создать сложную анимацию, оставив JavaScript в качестве пути. jQuery очень помог с анимацией благодаря нескольким методам, созданным для этой цели. Хотя она поставляется с несколькими простыми анимациями ( fadeIn() , hide() , slideDown() и т. Д.), Чтобы поддерживать низкий вес, библиотека предоставляет очень гибкий метод, называемый animate() , который позволяет нам создавать любые анимация мы хотим. Этот метод является темой этой статьи.
animate animate() jQuery — это метод-оболочка , то есть он работает с набором ранее выбранных элементов DOM, заключенных в jQuery. Этот метод позволяет применять ваши собственные эффекты анимации к элементам в наборе. Чтобы сделать это, мы должны предоставить набор свойств и значений стиля CSS, которых эти свойства достигнут в конце анимации. Промежуточные значения, которых стиль достигает во время эффекта (автоматически обрабатывается механизмом анимации), определяются продолжительностью эффекта и функцией замедления, две опции, которые мы скоро обсудим.
Список свойств стиля CSS, которые можно анимировать, ограничен теми, которые принимают числовые значения. Значение может быть абсолютным значением (например, 200) или относительным значением от начальной точки. В случае абсолютного значения jQuery принимает пиксели в качестве единицы по умолчанию. Мы также можем указать другие единицы, такие как em, rem или проценты. Чтобы указать относительные значения, мы должны поставить перед ним префикс + = или — =, чтобы указать относительные целевые значения в положительном или отрицательном направлении соответственно.
Теперь, когда мы немного знаем о animate() , пришло время взглянуть на его сигнатуры и параметры.
Подписи и параметры
Этот метод имеет две основные формы, и большинство его параметров являются необязательными (обозначаются обычными квадратными скобками):
-
animate(properties[, duration][, easing][, callback]) -
animate(properties[, options])
Также есть много чего сказать о параметрах:
-
properties(Object): хеш, содержащий значения, которые должны быть достигнуты в конце анимации. -
duration(Number | String): длительность эффекта в миллисекундах или одной из предварительно заданных строк: «медленно» (600 мс), «нормально» (400 мс) или «быстро» (200 мс). По умолчанию «нормальный». -
easing(String): имя функции замедления, используемой при выполнении перехода. Значением по умолчанию является «колебание». -
callback(Function): функция, выполняемая после завершения анимации для каждого анимированного элемента. -
options(Object): хеш, содержащий набор опций для передачи в метод. Доступны следующие варианты:-
always(функция): функция вызывается, когда анимация завершается или останавливается без завершения. -
complete(Function): функция, выполняемая после завершения анимации. -
done(Function): функция, вызываемая после завершения анимации. -
duration(String | Number): То же, что описано выше. -
easing(String): такой же, как описано ранее. -
fail(Function): функция, выполняемая при сбое анимации. -
progress(Функция): Функция запускается после каждого шага анимации. Функция вызывается только один раз для каждого анимированного элемента. -
queue(Boolean): если анимация должна быть помещена в очередь эффектов (подробнее об этом через несколько минут). Значением по умолчанию являетсяtrue. -
specialEasing(Object): хэш одного или нескольких свойств CSS, значениями которых являются функции замедления. -
start(Function): функция, выполняемая приstartанимации. -
step(Функция): функция, которая вызывается для каждого анимированного свойства каждого анимированного элемента.
-
Термин « ослабление» используется для описания способа обработки и темпа кадров анимации. Опция queue позволяет нам запускать анимации в последовательности, когда для нее установлено значение true , или параллельно, если для нее установлено значение false . В наших руках достаточно силы, которую мы можем использовать по своему усмотрению.
В оставшейся части этой статьи мы продемонстрируем некоторые из этих аргументов в действии, чтобы дать вам представление о том, что возможно с помощью animate() .
Пример использования
В этом разделе мы создадим несколько демонстраций, чтобы раскрыть возможности 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; }
С этой разметкой и CSS, используя силу animate() , мы переместим маленький квадрат с одной стороны на другую:
$('.rectangle') .find('.square-small') .animate({ left: 280 }, 'slow');
В этом коде мы указываем, что свойство left является единственным для анимации. Мы устанавливаем длительность анимации на заданное значение, slow (600 мс). Мы перемещаем внутренний .square-small <div> (имеющий класс .square-small ), используя абсолютное значение. Значение основано на ширине контейнера, который мы установили с помощью кода CSS, указанного выше. Это решение не очень гибкое, потому что если мы изменим ширину контейнера, внутренний <div> не достигнет другой стороны (в случае, если мы установим более широкую ширину контейнера), или пропустит ее (в случае, если мы установить более узкую ширину). Решение состоит в том, чтобы установить значение свойства left , основанное на вычислении текущей ширины внешней и внутренней <div> , следующим образом:
left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()
Этот пример доступен как JSbin :
Запуск нескольких анимаций в цикле
Выполнение нескольких анимаций для одного элемента или набора элементов так же просто, как связывание вызовов animate() . В этом примере мы переместим маленький квадрат, поскольку он следует периметру песочных часов внутри большого квадрата (вместо прямоугольника). Для создания этой демонстрации мы будем использовать следующую разметку:
<div class="square-big"> <div class="square-small"></div> </div>
Для стиля нам нужно использовать тот же CSS, который использовался ранее для .square-small , и следующий, чтобы .square-small самый внешний квадрат:
.square-big { width: 300px; height: 300px; display: block; position: relative; border: 1px solid black; margin: 20px 0; }
Последний шаг — написать код JavaScript, чтобы нарисовать четыре линии, составляющие периметр наших идеальных песочных часов. Начиная с верхнего левого угла самого внешнего квадрата, мы должны анимировать маленький квадрат, пока он не достигнет нижнего правого угла большого квадрата. Небольшой квадрат должен двигаться по диагонали, чтобы создать эффект. Как только он достигнет нижнего правого угла, мы должны переместить его в нижний левый угол. Затем он должен достичь верхнего правого угла и, наконец, вернуться в исходное положение.
Представляя эту демонстрацию, мы сказали, что хотим выполнять бесконечную анимацию. Итак, мы должны найти способ снова запустить всю анимацию, когда завершим последний шаг. Для этого мы можем заключить вызов в четыре цепных вызова animate() внутри функции, поэтому у нас есть функция, к которой можно обратиться. Затем мы можем использовать complete обратный вызов, который мы упомянули ранее, и IIFE, чтобы снова запустить анимацию после завершения последнего шага. Перевод этого описания в код приводит к:
(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(); } }) ); })();
В приведенном выше коде обратите внимание на то, как мы использовали переменную options чтобы нам не приходилось писать одни и те же параметры снова и снова при вызове animate() . Кроме того, поскольку в прошлый раз, когда мы использовали options нам нужно было добавить complete обратный вызов, мы используем метод extend() jQuery.
Этот пример доступен как JSbin :
Больше обратных вызовов к действию
В нашем последнем примере мы установим свойства start , complete и progress параметра options (второй параметр второй формы). Задача состоит в том, чтобы отключить кнопку, которая при нажатии запускает анимацию во время работы анимации. После этого мы хотим показать процент полноты анимации. Для этого примера мы изменим первое демо, которое мы создали.
Основываясь на описании, мы должны добавить кнопку и элемент (мы будем использовать span ), чтобы показать процент. Это изменение приводит к следующей разметке:
<div class="rectangle"> <div class="square-small"></div> </div> <button id="animation-button">Run!</button> <span id="percentage">0</span>%
Нам не нужно добавлять больше стиля, поэтому мы можем перейти к обсуждению кода JavaScript. Чтобы запустить анимацию только при нажатии кнопки, мы должны добавить обработчик к событию нажатия кнопки. Внутри обработчика мы отключаем и включаем кнопку, используя метод prop() jQuery, в зависимости от того, запущена анимация или нет. Наконец, мы используем второй аргумент, переданный обработчику, прикрепленному к параметру progress чтобы показать процент полноты анимации. Полученный код указан ниже:
$('#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)); } } ); });
Этот пример доступен как JSbin :
Вывод
В этой статье обсуждалось, что мы можем сделать, используя метод animate() jQuery. Мы ввели его подписи и параметры, которые он принимает. Во время статьи мы рассмотрели три примера анимации. Эта статья только рассмотрела то, что возможно с animate() . На самом деле, немного терпения и творчества, мы можем создавать действительно сложные и приятные анимации. Примером того, что вы можете сделать, является Audero Smoke Effect , плагин jQuery, который я разработал для создания эффекта дыма для одного или нескольких элементов, обычно изображений, на веб-странице. С его помощью вы можете создать эффект небольшой дымовой завесы, облака или чего-либо еще, что вы хотите, которое появляется из выбранных вами элементов.