Остановка анимации

В Zepto.js управление анимацией осуществляется с помощью метода animate(), который позволяет изменять CSS-свойства элементов с плавным переходом. Остановка анимации требует понимания внутреннего механизма очередей анимаций и особенностей работы библиотеки с таймерами.

Метод stop()

Основным инструментом для остановки текущей анимации является метод stop(). Он применяется к выбранным элементам и имеет следующую сигнатуру:

$(selector).stop(clearQueue, jumpToEnd);
  • clearQueue (по умолчанию false) — указывает, нужно ли очистить очередь последующих анимаций. Если передано true, все ожидающие анимации будут отменены.
  • jumpToEnd (по умолчанию false) — если true, текущая анимация завершится мгновенно, элементы примут конечное состояние анимации.

Пример остановки анимации:

$('#box').animate({ left: '200px' }, 2000);
// Через 1 секунду остановим анимацию и мгновенно установим конечное положение
setTimeout(function() {
    $('#box').stop(true, true);
}, 1000);

В этом примере #box перемещается на 200 пикселей вправо за 2 секунды, но через 1 секунду анимация прерывается и элемент сразу оказывается в позиции left: 200px.

Очередь анимаций

Zepto, подобно jQuery, поддерживает очередь анимаций. При последовательном вызове animate() для одного элемента все анимации ставятся в очередь:

$('#box').animate({ left: '100px' }, 500)
         .animate({ top: '100px' }, 500)
         .animate({ opacity: 0.5 }, 500);

Если требуется остановить текущую анимацию и очистить очередь, используется:

$('#box').stop(true);

В этом случае элемент перестанет выполнять текущую анимацию, а оставшиеся в очереди переходы не будут выполнены.

Прерывание анимации с сохранением позиции

Часто необходимо просто остановить анимацию без перехода к конечному состоянию. Для этого stop() вызывается без параметров или с первым аргументом false:

$('#box').stop(false, false);

Элемент сохранит текущее состояние на момент остановки, что удобно для интерактивных интерфейсов, где анимация зависит от действий пользователя.

Анимация с задержкой и остановка

Zepto позволяет комбинировать анимацию с функцией delay(). При использовании задержки stop() действует аналогично:

$('#box').animate({ left: '100px' }, 500)
         .delay(300)
         .animate({ top: '50px' }, 500);

$('#box').stop(true, false);

В этом примере текущая анимация прекращается, и все задержки и последующие анимации очищаются, но элемент не прыгает к конечному состоянию.

Прерывание нескольких элементов одновременно

Метод stop() можно применять к коллекциям элементов:

$('.item').animate({ opacity: 0.5 }, 1000);
$('.item').stop(true, true);

Все элементы с классом .item мгновенно принимают конечное состояние анимации и очищают очередь. Это особенно полезно при сложных интерфейсах с множественными анимируемыми блоками.

Особенности Zepto

  • Zepto не реализует полноценную очередь анимаций для всех CSS-свойств, как jQuery. Некоторые свойства могут анимироваться сразу, без постановки в очередь.
  • Метод stop() в Zepto работает только для анимаций, созданных с использованием animate().
  • Для плавного взаимодействия с пользовательскими событиями рекомендуется комбинировать stop() с событиями hover, click или touchstart.

Примеры практического применения

  1. Остановка анимации при наведении:
$('#box').hover(function() {
    $(this).stop(true, false).animate({ width: '300px' }, 500);
}, function() {
    $(this).stop(true, false).animate({ width: '150px' }, 500);
});
  1. Прерывание всех анимаций перед запуском новой:
$('#box').click(function() {
    $(this).stop(true, true).animate({ left: '400px', opacity: 0.8 }, 1000);
});
  1. Комбинация stop() и delay() для последовательных анимаций:
$('#box').animate({ top: '100px' }, 500)
         .delay(200)
         .animate({ left: '200px' }, 500)
         .stop(true, false); // Остановит и очистит очередь, не меняя текущего положения

Использование метода stop() в Zepto обеспечивает контроль над анимациями, предотвращает накопление долгих очередей и позволяет создавать динамичные, отзывчивые интерфейсы.

Оглавление