Delta time и временные расчёты

В Paper.js обновление сцены происходит в рамках анимационного цикла, управляемого событием onFrame. Каждое срабатывание этого события связано с одной итерацией отрисовки, но интервал между кадрами может быть непостоянным. Для точного управления движением объектов и анимациями необходимо учитывать Delta Time — разницу во времени между текущим и предыдущим кадром.

Основные понятия

Delta Time (event.delta) — это значение, предоставляемое объектом event в обработчике onFrame. Оно выражается в секундах и отражает фактическое время, прошедшее с момента последнего кадра.

view.onFr ame = function(event) {
    console.log(event.delta); // Вывод, например: 0.016 (секунд)
};

Использование delta time позволяет:

  • Сделать движение объектов независимым от частоты кадров
  • Обеспечить плавность анимации на разных устройствах
  • Выполнять точные расчёты физики, скорости, ускорения и интерполяции

Движение объектов с учётом Delta Time

Без учёта delta time анимация привязана к кадрам. Например:

var circle = new Path.Circle(new Point(50, 50), 20);
circle.fillColor = 'red';

view.onFr ame = function(event) {
    circle.position.x += 5; // Сдвиг на 5 пикселей каждый кадр
};

Если частота кадров падает с 60 fps до 30 fps, движение замедлится вдвое. Чтобы этого избежать, используют delta time:

view.onFr ame = function(event) {
    var speed = 200; // пикселей в секунду
    circle.position.x += speed * event.delta;
};

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

Временные расчёты и анимация по скорости

С delta time можно управлять скоростью и ускорением:

var velocity = new Point(100, 50); // пиксели в секунду

view.onFr ame = function(event) {
    circle.position += velocity * event.delta;
};

Для ускорения (acceleration) применяется аналогичная формула:

var acceleration = new Point(0, 50); // ускорение по оси Y
var velocity = new Point(0, 0);

view.onFr ame = function(event) {
    velocity += acceleration * event.delta;
    circle.position += velocity * event.delta;
};

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

Интерполяция и временные эффекты

Delta time облегчает реализацию интерполяций и эффектов плавного движения:

var target = new Point(400, 300);
var easing = 2.0;

view.onFr ame = function(event) {
    var vector = target - circle.position;
    circle.position += vector * easing * event.delta;
};

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

Сложные временные расчёты

  1. Обратный отсчёт или таймеры
var timer = 5; // секунд

view.onFr ame = function(event) {
    timer -= event.delta;
    if (timer <= 0) {
        console.log("Время вышло");
        timer = 5; // сброс
    }
};
  1. Циклические анимации

Использование delta time позволяет синхронизировать колебания:

var amplitude = 50;
var frequency = 1; // Гц
var time = 0;

view.onFr ame = function(event) {
    time += event.delta;
    circle.position.y = 200 + Math.sin(2 * Math.PI * frequency * time) * amplitude;
};
  1. Скорость движения вдоль кривой

При движении вдоль Path можно учитывать delta time для равномерного перемещения:

var path = new Path.Circle(new Point(300, 300), 150);
path.visible = false;

var offset = 0;
var speed = 100; // пикселей в секунду

view.onFr ame = function(event) {
    offset += speed * event.delta;
    offset %= path.length;
    circle.position = path.getPointAt(offset);
};

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

  • Всегда использовать event.delta при расчёте движения или таймеров.
  • Для физических симуляций умножение на delta time должно выполняться дважды: для обновления скорости и позиции.
  • Для интерполяции и плавных эффектов delta time гарантирует консистентность на разных FPS.
  • Не использовать фиксированные смещения без учета времени — это приводит к дрожанию или зависимости от производительности устройства.

Итоговые формулы

Обновление позиции с учетом скорости:

position += velocity * deltaTime

Обновление скорости с учетом ускорения:

velocity += acceleration * deltaTime

Интерполяция к цели с коэффициентом easing:

position += (target - position) * easing * deltaTime

Таймер обратного отсчёта:

timer -= deltaTime

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

Оглавление