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

Two.js предоставляет встроенные механизмы для управления анимацией, позволяя точно задавать скорость воспроизведения и синхронизировать движение объектов с временными параметрами. Центральным элементом управления является объект Two.Animator, который обеспечивает плавное обновление сцен с учетом временных интервалов.

Тайминг и кадры

В Two.js анимация основана на цикле рендеринга, который вызывается через requestAnimationFrame. Для контроля скорости используется дельта-время (delta), передаваемое в функцию обновления:

two.bind('update', function(frameCount, delta) {
  shape.translation.x += 100 * delta; // движение со скоростью 100px/сек
});
  • frameCount — номер текущего кадра.
  • delta — время между кадрами в секундах.
  • Умножение на delta обеспечивает независимость движения от частоты кадров.

Управление скоростью через play и pause

Two.js предоставляет методы для управления состоянием анимации:

two.play();  // запускает анимацию
two.pause(); // приостанавливает анимацию

Чтобы изменять скорость воспроизведения, используется свойство timeDelta:

two.timeDelta = 0.5; // замедление анимации в 2 раза

Значение timeDelta интерпретируется как множитель времени.

  • 1 — стандартная скорость.
  • 0.5 — половинная скорость (замедление).
  • 2 — двойная скорость (ускорение).

Настройка скорости отдельных объектов

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

let speedFactor = 1.5;

two.bind('update', function(frameCount, delta) {
  circle.translation.x += 80 * delta * speedFactor;
  rect.rotation += 0.02 * delta * speedFactor;
});

Такой подход позволяет управлять скоростью отдельных элементов независимо от глобального timeDelta.

Интерполяция и easing для плавного изменения скорости

Для создания эффекта ускорения или замедления используется интерполяция с функциями easing. Two.js поддерживает линейные и кривые функции, которые позволяют изменять скорость в течение анимации:

let t = 0;

two.bind('update', function(frameCount, delta) {
  t += delta;
  let easeFactor = Two.Utils.Easing.Quadratic.Out(t);
  rect.translation.x += 100 * delta * easeFactor;
});
  • t — накопленное время с начала анимации.
  • Two.Utils.Easing предоставляет набор стандартных кривых для ускорения и замедления.

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

В некоторых сценариях важно синхронизировать анимацию с внешними событиями или временными интервалами. Для этого можно комбинировать requestAnimationFrame с внутренним Two.update():

let lastTime = performance.now();

function animate(time) {
  let delta = (time - lastTime) / 1000; // перевод в секунды
  lastTime = time;

  shape.rotation += Math.PI * delta; // 180° в секунду
  two.update(); // принудительное обновление сцены

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

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

Комбинирование глобальной и локальной скорости

Two.js позволяет одновременно использовать глобальный множитель времени (two.timeDelta) и локальные коэффициенты объектов, что дает максимальную гибкость:

two.timeDelta = 1.2; // глобальное ускорение на 20%
let localSpeed = 0.8;

two.bind('update', function(frameCount, delta) {
  square.translation.y += 50 * delta * localSpeed;
});

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

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

  • Всегда использовать delta для расчета перемещений, чтобы движения были плавными при любой частоте кадров.
  • Для временных эффектов ускорения и замедления применять кривые Easing.
  • Разделять управление глобальной скоростью (two.timeDelta) и локальной (speedFactor для объектов), чтобы сохранять гибкость анимаций.
  • Для точной синхронизации с внешними процессами использовать ручной таймер с performance.now() и two.update().

Контроль скорости в Two.js строится на этих принципах, что позволяет создавать сложные и плавные анимации с точным управлением временем и темпом движения объектов.

Оглавление