Loop и delay

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

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

Бесконечный цикл

Наиболее простой вариант — бесконечное повторение:

Velocity(element, {
    opacity: 1,
    translateY: 50
}, {
    duration: 800,
    loop: true
});

При значении loop: true анимация будет повторяться бесконечно, формируя циклическое движение. Это используется для эффектов пульсации, индикаторов загрузки, плавного привлечения внимания к элементу.

Ограниченное количество повторов

Вместо бесконечного цикла можно задать конкретное число повторений:

Velocity(element, {
    rotateZ: 360
}, {
    duration: 1000,
    loop: 3
});

Значение 3 означает, что анимация выполнится три раза подряд. После завершения цикл прекращается автоматически.

Механика работы loop

При включённом цикле Velocity фактически переинициализирует анимацию после её завершения. Это важно учитывать при работе с изменяемыми стилями:

  • финальное состояние одной итерации становится стартовым для следующей
  • изменения DOM внутри анимации могут влиять на последующие циклы
  • значения begin и complete вызываются на каждую итерацию

loop в сочетании с transform-анимациями

Особое внимание требуется при использовании трансформаций:

Velocity(element, {
    translateX: 200
}, {
    duration: 600,
    loop: 4
});

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

Velocity(element, {
    translateX: 200
}, {
    duration: 400
}).then(() => {
    Velocity(element, {
        translateX: 0
    }, {
        duration: 400,
        loop: 2
    });
});

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

Управление задержками выполнения

Параметр delay задаёт паузу перед началом анимации. Он измеряется в миллисекундах и применяется непосредственно к конкретному вызову Velocity.

Базовое использование delay

Velocity(element, {
    opacity: 1
}, {
    duration: 500,
    delay: 1000
});

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

Delay в цепочках анимаций

Velocity поддерживает последовательные вызовы, где delay может использоваться как элемент композиции:

Velocity(element, {
    translateY: 100
}, {
    duration: 400
});

Velocity(element, {
    opacity: 0
}, {
    duration: 300,
    delay: 200
});

Задержка применяется ко второму действию, создавая визуальный разрыв между этапами.

Отличие delay от очереди выполнения

Важно различать:

  • delay — пауза внутри конкретной анимации
  • очередь Velocity — порядок выполнения анимаций на одном элементе

При использовании очереди:

Velocity(element, "fadeIn", {
    duration: 300
});

Velocity(element, "fadeOut", {
    duration: 300,
    delay: 500
});

вторая анимация начнётся после завершения первой, а затем дополнительно будет ожидание 500 мс.

Комбинирование loop и delay

Совместное использование этих параметров позволяет создавать сложные циклические паттерны поведения интерфейса.

Пульсация с паузой между циклами

Velocity(element, {
    scale: 1.2
}, {
    duration: 300,
    loop: true,
    delay: 200
});

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

Разделение фаз внутри повторения

Иногда требуется задержка внутри одного цикла:

Velocity(element, {
    opacity: 1
}, {
    duration: 300,
    loop: 3
});

Velocity(element, {
    opacity: 0.5
}, {
    duration: 300,
    delay: 150
});

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

Поведение complete и begin при loop

При каждом повторении анимации вызываются обратные вызовы:

  • begin — перед стартом каждой итерации
  • complete — после завершения каждой итерации
Velocity(element, {
    rotateZ: 180
}, {
    duration: 500,
    loop: 4,
    begin: function() {
        console.log("итерация началась");
    },
    complete: function() {
        console.log("итерация завершена");
    }
});

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

Остановка циклических анимаций

Циклы, запущенные через loop: true, могут быть остановлены программно:

Velocity(element, "stop", true);

Второй аргумент true очищает очередь и завершает текущую анимацию, предотвращая дальнейшие повторы.

Также возможна мягкая остановка без сброса очереди:

Velocity(element, "stop");

Задержка как инструмент синхронизации нескольких элементов

delay часто используется для создания каскадных эффектов:

Velocity(elements[0], { opacity: 1 }, { duration: 300, delay: 0 });
Velocity(elements[1], { opacity: 1 }, { duration: 300, delay: 100 });
Velocity(elements[2], { opacity: 1 }, { duration: 300, delay: 200 });

Так формируется последовательное появление элементов с равномерным интервалом.

Типичные ошибки при работе с loop и delay

При неправильной конфигурации возникают эффекты, которые сложно отладить:

  • накопление трансформаций при отсутствии сброса состояния
  • неожиданные паузы из-за суммирования delay и очереди
  • дублирование циклов при повторном вызове Velocity на одном элементе
  • конфликт между loop и внешними setTimeout

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

Использование delay для создания ритмических анимаций

С помощью delay формируется временная структура движения, где паузы становятся частью визуального языка интерфейса:

Velocity(element, {
    translateY: 30
}, {
    duration: 400
});

Velocity(element, {
    translateY: 0
}, {
    duration: 400,
    delay: 300
});

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

Оглавление