Остановка и пауза анимаций

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

Метод stop()

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

// Остановка всех анимаций на элементе
$("#box").velocity("stop");

// Остановка конкретной очереди
$("#box").velocity("stop", true); // true – очищает очередь

Параметры метода stop():

  • clearQueue (boolean, необязательный) – если true, все ожидающие в очереди анимации будут удалены.
  • gotoEnd (boolean, необязательный) – если true, анимация завершится мгновенно, применив конечные стили.

Пример использования с параметрами:

$("#box").velocity("stop", true, true);

В этом случае:

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

Метод pause() и resume()

Velocity.js поддерживает пауза и возобновление анимаций. Хотя прямого встроенного метода pause() нет в базовом API, существует расширение через управление прогрессом анимации:

var anim = $("#box").velocity({ left: "500px" }, { duration: 2000 });

// Пауза через внутренние свойства
anim.velocity("pause");

// Возобновление
anim.velocity("resume");

Для полной поддержки паузы часто используется сохранение прогресса анимации через колбеки progress и управление временем вручную.

var start = null;
var progress = 0;

$("#box").velocity({ left: "500px" }, {
  duration: 2000,
  progress: function(elements, complete, remaining, startTime, tweenValue) {
    progress = complete; // сохраняем прогресс
  }
});

// В момент паузы
$("#box").velocity("stop");

// Возобновление с сохранённого прогресса
$("#box").velocity({ left: "500px" }, {
  duration: 2000 * (1 - progress)
});

Управление очередями анимаций

Velocity.js использует очереди для последовательного выполнения анимаций. Методы stop() и pause() позволяют контролировать не только текущую анимацию, но и все последующие:

  • Остановка текущей и очистка очереди:
$("#box").velocity("stop", true);
  • Остановка текущей, оставляя очередь:
$("#box").velocity("stop", false);
  • Мгновенное завершение текущей анимации:
$("#box").velocity("stop", false, true);

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

Практические советы

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

Пример комбинированного управления

$("#box")
  .velocity({ left: "500px" }, { duration: 1000 })
  .velocity({ top: "200px" }, { duration: 1000 });

// Через 500мс останавливаем текущую анимацию и очищаем очередь
setTimeout(function() {
  $("#box").velocity("stop", true);
}, 500);

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

Методы остановки и паузы Velocity.js дают полный контроль над состоянием анимации и позволяют реализовать интерактивные, отзывчивые интерфейсы с минимальными усилиями.

Оглавление