Velocity.mock

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

Этот механизм позволяет:

  • мгновенно завершать анимации
  • сохранять корректный порядок вызова колбэков
  • имитировать временные задержки
  • ускорять воспроизведение анимаций в несколько раз

Принцип работы

В обычном режиме Velocity рассчитывает промежуточные значения CSS-свойств и применяет их с заданной частотой (обычно через requestAnimationFrame). При включении Velocity.mock:

  • пропускается фаза интерполяции значений
  • устанавливается конечное состояние анимации
  • триггерятся все связанные callbacks (begin, progress, complete)
  • тайминги могут масштабироваться

Включение режима

Velocity.mock = true;

При значении true:

  • все анимации выполняются мгновенно
  • длительность игнорируется
  • progress может вызываться только один раз или не вызываться вовсе

Частичное ускорение

Velocity.mock поддерживает числовое значение:

Velocity.mock = 10;

Это означает:

  • анимации ускоряются в 10 раз
  • длительность уменьшается пропорционально

Пример:

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

При Velocity.mock = 10:

  • фактическое время выполнения ≈ 100ms

Полная имитация (mock = true)

Velocity.mock = true;

Velocity(element, { translateX: "100px" }, {
    duration: 1000,
    begin: function() {
        console.log("Начало");
    },
    complete: function() {
        console.log("Завершение");
    }
});

Поведение:

  • begin вызывается сразу
  • свойство translateX устанавливается мгновенно
  • complete вызывается без задержки

Влияние на callbacks

begin

Вызывается синхронно при старте анимации, независимо от режима.

progress

  • В обычном режиме вызывается многократно

  • В mock-режиме:

    • может вызываться один раз
    • либо пропускаться (в зависимости от версии Velocity)

complete

Всегда вызывается, даже в mock-режиме, что важно для тестов.

Использование в тестировании

Одно из ключевых применений — unit и integration тесты.

beforeEach(function() {
    Velocity.mock = true;
});

afterEach(function() {
    Velocity.mock = false;
});

Преимущества:

  • тесты выполняются мгновенно
  • исключается нестабильность из-за таймингов
  • гарантируется детерминированность поведения

Сценарии применения

1. Автоматические тесты интерфейса

Velocity.mock = true;

Velocity(menu, { height: "200px" }, {
    complete: function() {
        assert(menu.style.height === "200px");
    }
});

2. Быстрая отладка

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

Velocity.mock = true;

Velocity(box, { scale: 2 });

3. Профилирование

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

Velocity.mock = true;
// измерение времени выполнения логики

Ограничения и особенности

Отсутствие плавности

В режиме true отсутствуют промежуточные значения — только конечное состояние.

Поведение easing-функций

  • easing не применяется
  • интерполяция пропускается

Влияние на цепочки анимаций

Velocity(element, { opacity: 0.5 }, { duration: 500 })
    .then(function() {
        return Velocity(element, { opacity: 1 }, { duration: 500 });
    });

При Velocity.mock = true:

  • обе анимации выполняются мгновенно
  • then вызывается сразу

Комбинирование с queue

Velocity.mock = true;

Velocity(element, { opacity: 0 }, { queue: "custom" });
Velocity(element, { opacity: 1 }, { queue: "custom" });

Velocity.Utilities.dequeue(element, "custom");

Очередь:

  • обрабатывается синхронно
  • порядок выполнения сохраняется

Работа с delay

Velocity.mock = true;

Velocity(element, { opacity: 1 }, {
    delay: 1000,
    complete: function() {
        console.log("Done");
    }
});

Поведение:

  • delay игнорируется
  • complete вызывается сразу

При числовом mock:

Velocity.mock = 5;
  • delay сокращается (1000ms → 200ms)

Влияние на promise-интерфейс

Velocity поддерживает Promise:

Velocity(element, { opacity: 1 }).then(function() {
    console.log("Finished");
});

В mock-режиме:

  • Promise резолвится мгновенно
  • цепочки выполняются синхронно

Взаимодействие с stop()

Velocity.mock = true;

Velocity(element, { opacity: 0 }, { duration: 1000 });
Velocity(element, "stop");

Так как анимация завершается мгновенно:

  • stop() не оказывает эффекта

Переключение режимов

Velocity.mock = false;  // стандартный режим
Velocity.mock = true;   // мгновенный
Velocity.mock = 5;      // ускоренный

Рекомендуется:

  • явно возвращать значение после тестов
  • избегать глобального включения в production

Практический паттерн использования

function enableFastAnimations() {
    Velocity.mock = 5;
}

function disableFastAnimations() {
    Velocity.mock = false;
}

Или для тестовой среды:

if (process.env.NODE_ENV === "test") {
    Velocity.mock = true;
}

Внутренняя реализация (концептуально)

При включении mock:

  1. Пропускается цикл tick
  2. Не используется requestAnimationFrame
  3. Значения свойств устанавливаются напрямую
  4. Вызываются callbacks в нужной последовательности

Сравнение режимов

Режим Поведение Использование
false Полная анимация Production
true Мгновенное выполнение Тесты, отладка
number > 1 Ускоренная анимация Быстрый UI-прототипинг

Типичные ошибки

1. Забытый mock в production

Velocity.mock = true;

Приводит к:

  • отсутствию анимаций
  • «скачущему» UI

2. Ожидание progress

progress: function() {
    // может не выполниться
}

В mock-режиме не гарантируется многократный вызов.

3. Использование delay

В режиме true delay не работает.

Практическое применение в крупных проектах

  • ускорение CI/CD тестов
  • проверка сложных цепочек анимаций
  • разработка без задержек интерфейса
  • симуляция пользовательских сценариев

Интеграция с фреймворками

React

useEffect(() => {
    Velocity.mock = process.env.NODE_ENV === "test";
}, []);

Vue

if (process.env.NODE_ENV === "test") {
    Velocity.mock = true;
}

Контроль производительности

Mock-режим позволяет изолировать:

  • вычисления JavaScript
  • DOM-операции
  • влияние анимаций

Это особенно важно при анализе узких мест.

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

Velocity(elements, { opacity: 1 });

В mock-режиме:

  • все элементы обновляются мгновенно
  • нет поэлементной задержки
  • нет stagger-эффекта

Работа со stagger

Velocity(elements, { opacity: 1 }, { stagger: 100 });

В режиме true:

  • stagger игнорируется
  • все элементы анимируются одновременно

При числовом mock:

  • stagger уменьшается пропорционально

Использование в debug-режиме

if (window.DEBUG) {
    Velocity.mock = 3;
}

Позволяет:

  • ускорить интерфейс
  • сохранить визуальную плавность

Контроль через глобальные настройки

Velocity.mock — глобальная переменная:

  • влияет на все анимации
  • не имеет локального scope

Для локального контроля требуется вручную переключать значение.

Взаимодействие с другими настройками Velocity

Работает совместно с:

  • queue
  • delay
  • loop
  • repeat
  • promise

Однако временные аспекты масштабируются или игнорируются.

Выводы по применению

  • основной инструмент для тестирования
  • ускоряет разработку интерфейсов
  • обеспечивает предсказуемость выполнения анимаций
  • требует аккуратного управления состоянием в проекте
Оглавление