view.onFrame

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

Синтаксис и базовое использование

view.onFr ame = function(event) {
    // Код, выполняемый на каждом кадре
};

Параметр event содержит важные данные о текущем кадре:

  • event.count — количество кадров с момента начала анимации. Полезно для циклических и постепенных изменений.
  • event.delta — время (в секундах), прошедшее с предыдущего кадра. Используется для плавной анимации, независимой от частоты кадров.
  • event.time — общее время с начала анимации в секундах.

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

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

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

Здесь 100 * event.delta гарантирует, что скорость движения не зависит от частоты кадров.

Управление анимацией

view.onFrame используется для разнообразных анимационных эффектов:

  1. Повороты объектов
var rectangle = new Path.Rectangle({
    point: [150, 50],
    size: [80, 40],
    fillColor: 'blue'
});

view.onFr ame = function(event) {
    rectangle.rotate(45 * event.delta);
};
  1. Изменение размеров
var star = new Path.Star({
    center: [300, 150],
    points: 5,
    radius1: 20,
    radius2: 50,
    fillColor: 'green'
});

view.onFr ame = function(event) {
    star.scale(1 + 0.5 * Math.sin(event.time));
};
  1. Плавное движение с синусоидальными колебаниями
var path = new Path.Circle({
    center: [200, 200],
    radius: 25,
    fillColor: 'orange'
});

view.onFr ame = function(event) {
    path.position.y = 200 + 50 * Math.sin(event.time * 2);
};

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

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

Остановка и повторное использование

Для временной остановки анимации используется присваивание null:

view.onFr ame = null;

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

Пример комплексной анимации

Создание динамического эффекта падающих шаров:

var balls = [];
for (var i = 0; i < 10; i++) {
    balls.push(new Path.Circle({
        center: [Math.random() * view.size.width, Math.random() * view.size.height],
        radius: 15,
        fillColor: new Color(Math.random(), Math.random(), Math.random())
    }));
}

view.onFr ame = function(event) {
    balls.forEach(function(ball) {
        ball.position.y += 100 * event.delta;
        if (ball.position.y > view.size.height) {
            ball.position.y = 0;
            ball.position.x = Math.random() * view.size.width;
        }
    });
};

В этом примере используется комбинация event.delta и проверки положения для создания бесконечного эффекта падения шаров с разными цветами.

Использование с другими событиями

view.onFrame часто комбинируется с событиями мыши или клавиатуры:

var movingCircle = new Path.Circle({
    center: view.center,
    radius: 20,
    fillColor: 'purple'
});

var velocity = new Point(0, 0);

tool.onKeyD own = function(event) {
    if (event.key === 'up') velocity.y = -100;
    if (event.key === 'down') velocity.y = 100;
    if (event.key === 'left') velocity.x = -100;
    if (event.key === 'right') velocity.x = 100;
};

tool.onKe yUp = function(event) {
    velocity = new Point(0, 0);
};

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

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

Оглавление