Speed - скорость воспроизведения

Параметр speed в библиотеке mo.js управляет глобальной скоростью воспроизведения анимации, влияя на то, как быстро проходит весь таймлайн. В отличие от изменения duration, которое влияет на конкретную анимацию, speed масштабирует время выполнения без изменения логики самих анимационных сегментов.

Общий принцип работы

speed применяется как множитель времени:

  • speed: 1 — нормальная скорость (по умолчанию)
  • speed: 2 — анимация проигрывается в 2 раза быстрее
  • speed: 0.5 — анимация замедляется в 2 раза

Фактически происходит масштабирование временной шкалы: все значения duration, delay, repeatDelay и других временных параметров пересчитываются автоматически.

Базовый пример

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  duration: 2000,
  fill: 'none',
  stroke: 'cyan',
  strokeWidth: 5
});

circle.speed(2).play();

В этом примере:

  • исходная длительность — 2000 мс
  • при speed(2) фактическое время — 1000 мс

Влияние на тайминг

Масштабирование времени

Пусть задана анимация:

duration: 1000,
delay: 500

При speed: 2:

  • duration → 500 мс
  • delay → 250 мс

При speed: 0.5:

  • duration → 2000 мс
  • delay → 1000 мс

Таким образом, speed влияет на всю временную структуру, включая:

  • duration
  • delay
  • repeatDelay
  • timeline

Отличие от duration

duration

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

speed

  • масштабирует время
  • применяется ко всей анимации или таймлайну
  • удобен для динамического управления

Пример:

circle.duration(2000); // фиксированное изменение
circle.speed(2);       // относительное ускорение

Работа с Timeline

speed особенно полезен при использовании mojs.Timeline.

const timeline = new mojs.Timeline();

timeline
  .add(circle1, circle2)
  .speed(1.5)
  .play();

Здесь:

  • все анимации внутри timeline синхронно ускоряются
  • не требуется менять параметры каждой анимации

Динамическое изменение скорости

speed можно изменять во время выполнения:

circle.play();

setTimeout(() => {
  circle.speed(0.3);
}, 500);

Эффект:

  • анимация начнётся нормально
  • затем резко замедлится

Это позволяет реализовывать:

  • эффект замедления времени (slow motion)
  • ускорение при взаимодействии
  • адаптацию под производительность устройства

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

При наличии repeat:

const shape = new mojs.Shape({
  repeat: 3,
  duration: 1000
}).speed(2);

Все повторы также ускоряются:

  • каждый цикл будет 500 мс
  • общее время сокращается пропорционально

Комбинация с easing

speed не изменяет форму easing-функции, но влияет на её восприятие:

easing: 'elastic.out'

При увеличении скорости:

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

При уменьшении:

  • движение становится более плавным и растянутым

Практические сценарии

Глобальное ускорение интерфейса

timeline.speed(1.8);

Используется для:

  • быстрого отклика UI
  • уменьшения времени ожидания

Замедление для акцента

shape.speed(0.4);

Применяется для:

  • демонстрации деталей
  • акцентирования внимания

Интерактивное управление

document.addEventListener('mousemove', (e) => {
  const speed = e.clientX / window.innerWidth * 2;
  shape.speed(speed);
});

Создаёт эффект:

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

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

1. Значение 0

shape.speed(0);
  • анимация фактически «замораживается»
  • проигрывание не происходит

2. Отрицательные значения

Не поддерживаются:

shape.speed(-1); // некорректно

3. Очень большие значения

shape.speed(10);
  • анимация может выглядеть мгновенной
  • возможны пропуски кадров

Взаимодействие с play / pause

shape.speed(2).play();
shape.pause();
shape.speed(0.5).play();

Поведение:

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

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

Методы mo.js поддерживают цепочку вызовов:

new mojs.Shape({...})
  .speed(1.5)
  .play();

Внутренняя логика

mo.js использует собственный механизм тайминга, где:

  • speed влияет на расчёт текущего времени (currentTime)
  • применяется множитель к дельте времени между кадрами
  • не изменяет сами ключевые кадры (tween)

Сравнение с CSS-анимациями

В CSS аналогом можно считать:

animation-duration
animation-play-state

Но:

  • в CSS нет прямого аналога speed
  • изменение скорости требует перерасчёта duration

mo.js решает это через абстракцию таймлайна.

Лучшие практики

Использовать speed для:

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

Избегать:

  • экстремальных значений (0.01 или 10+)
  • замены duration, если нужна точная настройка

Частые ошибки

Ошибка: попытка заменить duration

shape.speed(2000); // неверно

speed — не абсолютное время, а коэффициент.

Ошибка: ожидание независимости

shape1.speed(2);
shape2.speed(1);

Если они в одном Timeline, может возникнуть конфликт — лучше управлять скоростью на уровне таймлайна.

Вывод ключевых свойств

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