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

Библиотека Zepto предоставляет лёгкий и компактный способ работы с DOM, включая поддержку анимаций. Одной из ключевых особенностей управления анимацией является очередь анимации, которая позволяет последовательно выполнять эффекты, избегая конфликтов между ними и обеспечивая плавность визуальных изменений.

Принцип работы очереди

Каждый элемент в Zepto имеет собственную внутреннюю очередь анимаций. При вызове метода .animate() без дополнительных параметров новая анимация автоматически добавляется в очередь текущего элемента. Zepto гарантирует, что следующая анимация не начнётся до завершения предыдущей.

Очередь реализуется как массив функций, каждая из которых выполняет определённый анимационный шаг. После завершения текущей функции вызывается следующая.

Пример последовательной анимации:

$('#box')
  .animate({ width: '200px' }, 500)
  .animate({ height: '200px' }, 500)
  .animate({ opacity: 0.5 }, 500);

В этом примере #box сначала изменяет ширину, затем высоту, и только после этого — прозрачность. Каждое действие добавляется в очередь и выполняется последовательно.

Методы управления очередью

Zepto предоставляет несколько методов для работы с очередью анимаций:

  1. queue([queueName,] function) — добавляет новую функцию в очередь элемента.

    • queueName — необязательный параметр, позволяет создавать несколько независимых очередей.
    • function — функция, которая будет выполнена при достижении своей позиции в очереди. Для продолжения выполнения следующей функции необходимо вызвать next().

Пример пользовательской очереди:

$('#box').queue(function(next){
    $(this).css('background-color', 'red');
    setTimeout(next, 300);
}).queue(function(next){
    $(this).css('background-color', 'blue');
    setTimeout(next, 300);
});
  1. dequeue([queueName]) — запускает выполнение следующей функции в указанной очереди. Если queueName не указан, используется очередь по умолчанию.
$('#box').dequeue();
  1. clearQueue([queueName]) — очищает очередь, удаляя все оставшиеся функции. Эффективно для отмены запланированных анимаций.
$('#box').clearQueue();

Параметры .animate() и их влияние на очередь

Метод .animate() принимает три ключевых аргумента:

  1. Свойства для анимации — объект вида {width: '200px', opacity: 0.5}.
  2. Продолжительность — число миллисекунд или строки 'fast', 'slow'.
  3. Функция обратного вызова — вызывается после завершения анимации. Вызов функции автоматически запускает следующий шаг очереди.

Пример с колбэком:

$('#box').animate({ left: '100px' }, 400, function(){
    console.log('Анимация завершена');
});

Если нужно добавить анимацию в начало очереди, используется метод .queue('fx', func) с последующим вызовом .dequeue().

Пользовательские очереди

Zepto позволяет создавать собственные очереди, не связанные с визуальными эффектами. Это удобно для выполнения последовательных задач:

$('#box').queue('custom', function(next){
    console.log('Первый шаг');
    next();
}).queue('custom', function(next){
    console.log('Второй шаг');
    next();
});

$('#box').dequeue('custom');

Все функции в очереди выполняются последовательно, пока очередь не опустеет.

Взаимодействие анимаций с очередью по умолчанию

По умолчанию все вызовы .animate() используют очередь 'fx'. Если несколько анимаций запускаются одновременно без очереди, они могут конфликтовать. Добавление их в очередь обеспечивает синхронность и предсказуемость.

Для временного запуска анимации без очереди можно использовать параметр { queue: false }:

$('#box').animate({ width: '300px' }, { duration: 500, queue: false });

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

Использование delay() для управления временем

Метод .delay(ms) позволяет приостанавливать выполнение очереди на указанное время:

$('#box')
  .animate({ width: '200px' }, 500)
  .delay(300)
  .animate({ height: '200px' }, 500);

Здесь между изменением ширины и высоты будет пауза в 300 мс. delay() фактически добавляет специальную функцию в очередь, которая вызывает next() после заданной задержки.

Важные нюансы

  • Очередь анимации существует на уровне каждого DOM-элемента, что позволяет одновременно анимировать несколько элементов независимо.
  • Необходимо всегда вызывать next() в пользовательских очередях, иначе выполнение остановится.
  • Методы .stop() и .finish() позволяют управлять текущей анимацией и всей очередью, прерывая или завершив все запланированные действия.

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

$('#box').stop(true); // Прерывает текущую анимацию и очищает очередь

Резюме ключевых возможностей очереди

  • Автоматическое последовательное выполнение анимаций через .animate().
  • Создание и управление пользовательскими очередями через .queue(), .dequeue().
  • Возможность прерывания и очистки очереди через .stop() и .clearQueue().
  • Управление временем выполнения с помощью .delay().
  • Разделение очередей по имени для независимых процессов.

Эти инструменты делают Zepto гибким и компактным решением для создания сложных, последовательных анимационных эффектов с контролем над порядком и временем их выполнения.

Оглавление