item.onFrame

В Paper.js объекты сцены, такие как Path, Raster, Group и другие, наследуют свойства и методы от базового класса Item. Одним из мощных инструментов для создания анимации является событие onFrame. Оно позволяет выполнять код на каждом кадре анимации, синхронизированно с обновлением холста.

Основная концепция

Событие onFrame срабатывает каждый раз, когда Paper.js обновляет экран. Оно предоставляет объект события, содержащий важные свойства для управления анимацией:

item.onFr ame = function(event) {
    // event.time - общее время с момента начала анимации
    // event.delta - время между предыдущим и текущим кадром
};
  • event.time — общее время в секундах с момента старта проекта или старта анимации.
  • event.delta — дельта-время между текущим и предыдущим кадром, полезно для синхронизации движения независимо от FPS.

Применение для анимации объектов

Наиболее частое использование onFrame — анимация позиций, масштабов и свойств объектов.

Перемещение объекта

var circle = new Path.Circle({
    center: [50, 50],
    radius: 20,
    fillColor: 'red'
});

circle.onFr ame = function(event) {
    // Двигаем круг вправо на 2 пикселя каждый кадр
    this.position.x += 2;
};

В этом примере круг будет непрерывно смещаться вправо, пока его обработчик onFrame активен.

Анимация по времени

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

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

Такой подход гарантирует, что объект будет двигаться с постоянной скоростью независимо от FPS.

Работа с углами и вращением

item.onFrame отлично подходит для плавного вращения объектов:

var square = new Path.Rectangle({
    point: [100, 100],
    size: [50, 50],
    fillColor: 'blue'
});

square.onFr ame = function(event) {
    this.rotate(45 * event.delta); // вращение 45 градусов в секунду
};

Использование event.delta делает вращение плавным и независимым от частоты обновления экрана.

Создание сложных анимаций

Комбинация движения, масштабирования и прозрачности позволяет создавать динамичные эффекты:

var star = new Path.Star({
    center: [200, 200],
    points: 5,
    radius1: 20,
    radius2: 50,
    fillColor: 'yellow'
});

star.onFr ame = function(event) {
    this.rotate(90 * event.delta);
    this.scale(1 + 0.5 * Math.sin(event.time));
    this.opacity = 0.5 + 0.5 * Math.sin(event.time);
};

Здесь объект вращается, пульсирует и меняет прозрачность синхронно с течением времени.

Управление событиями и удаление обработчика

Можно временно или полностью остановить анимацию, удалив обработчик onFrame:

star.onFr ame = function(event) {
    this.position.x += 5;
    if (this.position.x > 400) {
        this.onFr ame = null; // отключение анимации
    }
};

После присвоения null обработчику анимация прекращается, что позволяет оптимизировать производительность.

Использование onFrame для групп объектов

Группы (Group) и слои (Layer) тоже поддерживают onFrame. При присвоении функции группе, она применяется ко всей группе как единому объекту:

var group = new Group([circle, square]);
group.onFr ame = function(event) {
    this.rotate(30 * event.delta);
};

В результате вся группа будет вращаться вокруг своей центра позиции.

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

  1. Минимизировать количество операций внутри onFrame.
  2. Использовать event.delta для синхронизации анимации с реальным временем.
  3. Для большого числа объектов рассмотреть использование Raster или Group, чтобы уменьшить нагрузку на рендеринг.
  4. При необходимости отключать onFrame у объектов, которые больше не видны на холсте.

Сочетание с другими событиями

item.onFrame можно использовать совместно с onMouseMove, onClick или другими событиями Paper.js для интерактивных анимаций:

circle.onFr ame = function(event) {
    this.fillColor.hue += 1; // плавное изменение цвета
};

circle.onMouseM ove = function(event) {
    this.position = event.point; // следование за курсором
};

Это позволяет создавать анимации, реагирующие на действия пользователя и одновременно изменяющиеся с течением времени.

Заключение по использованию

Событие item.onFrame является универсальным инструментом для создания анимаций в Paper.js. Оно обеспечивает управление движением, вращением, масштабом и прозрачностью объектов с высокой точностью и синхронизацией с кадрами рендеринга. Правильное использование event.time и event.delta позволяет создавать плавные, предсказуемые анимации, которые легко комбинировать и оптимизировать для сложных сцен.

Оглавление