Паузы и остановка анимации

Paper.js предоставляет высокоуровневую систему для создания интерактивной графики и анимаций на HTML5 Canvas. Одной из ключевых возможностей является управление временем исполнения анимации через паузы, остановку и перезапуск. Эти механизмы реализуются через объект view и обработчики событий.

Основные методы управления анимацией

1. view.play() Метод запускает или возобновляет анимацию, если она была остановлена. Используется, когда необходимо продолжить движение объектов после паузы.

view.play();

2. view.pause() Приостанавливает анимацию без удаления объектов с канваса. В отличие от полной остановки, объекты сохраняют своё состояние, и анимация может быть продолжена вызовом view.play().

view.pause();

3. view.stop() Полностью останавливает анимацию. После вызова view.stop() объекты остаются на канвасе, но события onFrame не будут больше вызываться, пока не будет выполнен view.play().

view.stop();

Контроль с помощью события onFrame

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

let isPaused = false;

function onFrame(event) {
    if (isPaused) return; // Прерывание анимации на кадре
    
    circle.position.x += 2;
}

// Остановка нажатой кнопкой
document.getElementById('pauseBtn').oncl ick = () => {
    isPaused = true;
};

// Продолжение
document.getElementById('playBtn').oncl ick = () => {
    isPaused = false;
};

Ключевая особенность: анимация внутри onFrame полностью зависит от логики, заложенной в обработчике. view.pause() и view.stop() действуют глобально на все кадры.

Различие между pause и stop

Метод Действие Возобновление
view.pause() Приостанавливает кадры, но оставляет состояние view.play()
view.stop() Полная остановка событий кадра view.play()

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

Применение флагов для локальной паузы

Часто требуется приостановить анимацию только для конкретного объекта, а не для всего canvas. Для этого создаются локальные флаги:

let moving = true;

function onFrame(event) {
    if (moving) {
        rectangle.position.y += 1;
    }
}

document.getElementById('toggleBtn').oncl ick = () => {
    moving = !moving; // Переключение состояния движения
};

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

Анимации с таймерами и задержками

Paper.js не предоставляет встроенные таймеры, поэтому для отложенной остановки или паузы используются стандартные методы Jav * aScript: setTimeout и setInterval.

// Остановить анимацию через 3 секунды
setTimeout(() => {
    view.pause();
}, 3000);

// Возобновить через 2 секунды после паузы
setTimeout(() => {
    view.play();
}, 5000);

Сочетание view.pause() и таймеров позволяет создавать сложные сценарии анимации, включая временные остановки, циклы и пошаговые движения.

Использование onFrame с event.delta

Каждый кадр события onFrame передаёт объект event, содержащий свойства:

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

Для плавного управления анимацией можно использовать event.delta при паузе и возобновлении движения:

let paused = false;
let speed = 100; // пикселей в секунду

function onFrame(event) {
    if (!paused) {
        circle.position.x += speed * event.delta;
    }
}

Это обеспечивает постоянную скорость движения независимо от частоты кадров и времени паузы.

Примеры сложных сценариев

  1. Множественные паузы для разных объектов:
let obj1Moving = true;
let obj2Moving = true;

function onFrame(event) {
    if (obj1Moving) circle1.position.x += 2;
    if (obj2Moving) circle2.position.y += 3;
}
  1. Пошаговое движение с авто-паузой:
let steps = 0;
function onFrame(event) {
    circle.position.x += 1;
    steps++;
    if (steps >= 50) {
        view.pause(); // пауза после 50 шагов
    }
}
  1. Комбинация таймеров и событий:
view.play();
setTimeout(() => view.pause(), 2000);
setTimeout(() => view.play(), 4000);

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

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

  • Использовать view.pause() вместо полного удаления объектов, чтобы избежать затрат на повторное создание.
  • Для больших сцен с множеством объектов применяются локальные флаги, чтобы приостанавливать анимацию только для нужных элементов.
  • В сочетании с event.delta движение остаётся плавным и синхронизированным независимо от частоты кадров.

Управление паузами и остановкой анимации в Paper.js строится на комбинации методов view.play(), view.pause(), view.stop(), обработчиков onFrame и локальных флагов. Эти инструменты позволяют создавать гибкую, управляемую анимацию с точным контролем времени, шагов и состояния объектов.

Оглавление