onFrame и цикл анимации

В Paper.js анимация реализуется через событие onFrame, которое срабатывает на каждом кадре, обеспечивая плавное обновление сцены. Этот механизм позволяет создавать интерактивные и динамичные графические эффекты без прямого использования requestAnimationFrame из чистого JavaScript.

Регистрация обработчика onFrame

Обработчик onFrame назначается глобально или для конкретного объекта проекта Paper.js:

paper.view.onFr ame = function(event) {
    // Код анимации
};

Аргумент event содержит полезные свойства:

  • event.count — количество кадров с начала анимации.
  • event.delta — время в секундах, прошедшее с последнего кадра.
  • event.time — общее время, прошедшее с начала анимации.

Пример: плавное движение объекта по горизонтали с постоянной скоростью:

let circle = new Path.Circle(new Point(50, 100), 30);
circle.fillColor = 'red';

paper.view.onFr ame = function(event) {
    circle.position.x += 100 * event.delta; // скорость 100 пикселей в секунду
};

Принципы работы цикла анимации

Каждый кадр Paper.js выполняет следующие шаги:

  1. Вызывает функцию onFrame, если она задана.
  2. Пересчитывает положение и свойства всех объектов сцены.
  3. Перерисовывает канвас, обеспечивая плавное отображение изменений.

Важное свойство: обновления происходят синхронно с частотой обновления дисплея, обычно 60 кадров в секунду, что обеспечивает плавность движения.

Контроль скорости и времени

Использование event.delta позволяет адаптировать анимацию к изменению частоты кадров, делая движение независимым от FPS:

rectangle.position.y += speed * event.delta;

Здесь speed задаётся в пикселях в секунду, а event.delta корректирует смещение в зависимости от реального времени между кадрами.

Анимация с использованием векторов и математики

Paper.js работает с объектом Point, что упрощает вычисления для движения, столкновений и физических эффектов.

Пример движения по круговой траектории:

let center = view.center;
let radius = 100;
let angle = 0;

paper.view.onFr ame = function(event) {
    angle += 1 * event.delta; // скорость изменения угла
    circle.position = center + new Point({
        length: radius,
        angle: angle * 180 / Math.PI
    });
};

Использование векторов и методов Point позволяет легко создавать сложные траектории и реагировать на столкновения с границами канваса.

Множественные объекты и группировки

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

let circles = [];
for (let i = 0; i < 5; i++) {
    let c = new Path.Circle(new Point(50 + i*60, 100), 20);
    c.fillColor = 'blue';
    circles.push(c);
}

paper.view.onFr ame = function(event) {
    circles.forEach((c, index) => {
        c.position.y += (index + 1) * 30 * event.delta;
    });
};

Группы объектов (Group) позволяют применять трансформации ко всем элементам сразу, сохраняя иерархию и централизованный контроль:

let group = new Group(circles);
group.rotate(1); // вращение всей группы на каждом кадре

Интерполяция и сглаживание

Для плавной анимации свойств объектов можно использовать интерполяцию:

circle.position = circle.position + (targetPosition - circle.position) * 0.05;

Этот метод обеспечивает плавное приближение к целевой позиции, создавая эффект «инерции».

Эффекты с изменением цветов и прозрачности

onFrame подходит не только для перемещения объектов. Можно анимировать цвета, толщину линий, масштаб и прозрачность:

circle.fillColor.hue += 1; // циклическое изменение цвета
circle.opacity = 0.5 + 0.5 * Math.sin(event.count * 0.1); // пульсация прозрачности

Рекомендации по оптимизации

  • Минимизировать создание новых объектов внутри onFrame, чтобы избежать утечек памяти.
  • Использовать свойства event.delta для корректировки скорости при разной частоте кадров.
  • Для сложных анимаций группировать объекты, чтобы уменьшить количество отдельных вычислений.

Заключение по практическому использованию

Событие onFrame в Paper.js является основой циклической анимации, позволяя:

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

Правильное применение onFrame и методов работы с объектами делает Paper.js мощным инструментом для интерактивной графики и визуализации динамических эффектов.

Оглавление