Автоматическое и ручное обновление

Для начала работы с Two.js необходимо создать объект сцены, который управляет всей графикой и рендерингом. Инициализация выполняется через конструктор Two с передачей конфигурации:

const elem = document.getElementById('draw-shapes');

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // или canvas, webgl
}).appendTo(elem);

Здесь ключевые параметры:

  • width и height — размеры канваса или SVG.
  • type — рендерер: svg, canvas или webgl.
  • domElement — автоматически создаваемый элемент вставляется в указанный контейнер.

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

Автоматическое обновление сцены

Two.js предоставляет механизм автообновления, который обеспечивает непрерывную перерисовку сцены при изменении объектов. Основной метод для этого — two.play():

two.play();

Когда включено автоматическое обновление:

  • Все изменения свойств объектов (позиции, цвета, масштаб) отражаются на сцене сразу.
  • Two.js вызывает внутренний цикл анимации с использованием requestAnimationFrame.
  • Можно назначать обработчики на кадры через событие update:
two.bind('update', function(frameCount) {
  circle.rotation += 0.05;
});

Параметры события update:

  • frameCount — количество прошедших кадров с момента запуска two.play().
  • Можно использовать для расчёта анимаций, временных эффектов или движения объектов.

Особенности автообновления:

  • Оптимально для динамических сцен с плавными анимациями.
  • Не требуется вручную вызывать рендеринг после каждого изменения.
  • В сочетании с Two.make* удобно создавать комплексные анимационные сцены.

Ручное обновление сцены

В ряде случаев автоматическое обновление нежелательно, например:

  • Когда нужно обновлять сцену только при изменении данных.
  • Для оптимизации производительности на сложных сценах.
  • При реализации интерактивных интерфейсов, где кадры перерисовываются по событию пользователя.

Для ручного обновления используется метод:

two.update();

Пример ручного управления анимацией:

const circle = two.makeCircle(400, 300, 50);
circle.fill = '#FF8000';

let angle = 0;

function rotateCircle() {
  angle += 0.05;
  circle.rotation = angle;
  two.update(); // вручную обновляем сцену
  requestAnimationFrame(rotateCircle);
}

rotateCircle();

Ключевые моменты ручного обновления:

  • two.update() выполняет пересчёт всех трансформаций и перерисовку.
  • Можно комбинировать с requestAnimationFrame для создания собственного цикла анимации.
  • Контроль над частотой обновлений позволяет уменьшить нагрузку на процессор и GPU.

Разница между авто- и ручным обновлением

Параметр Автообновление (two.play()) Ручное обновление (two.update())
Цикл рендеринга Встроенный, requestAnimationFrame Пользовательский цикл
Производительность Высокая, но непрерывная Регулируется вручную
Контроль над кадрами Минимальный Полный
Использование Для динамических сцен и анимаций Для статических сцен или событий

Комбинированное использование

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

  • Автообновление включено для основных анимаций.
  • Ручное обновление вызывается для дополнительных эффектов, не требующих постоянного рендеринга.
two.play();

function slowEffect() {
  rectangle.translation.x += 1;
  two.update(); // ручное обновление эффекта
}

setInterval(slowEffect, 200);

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

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

  1. Для простых анимаций и интерактивных сцен — использовать автообновление.
  2. Для статических объектов и редких изменений — лучше применять ручное обновление.
  3. Смешанный подход обеспечивает оптимизацию производительности без потери гибкости.
  4. Событие update полезно для синхронизации всех объектов сцены с одним кадром.
  5. Изменение свойств объектов (position, rotation, scale) между кадрами корректно обрабатывается обоими режимами, но в ручном обновлении необходимо явно вызвать two.update().

Создание пользовательского цикла с ручным обновлением

Для контроля скорости и логики анимации можно использовать кастомный цикл:

let lastTime = 0;

function animate(time) {
  const delta = time - lastTime;
  lastTime = time;

  // Обновляем объекты с учётом delta
  square.translation.x += 0.1 * delta;

  two.update(); // перерисовка сцены
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

Такой подход позволяет:

  • Управлять скоростью анимации независимо от частоты кадров.
  • Изменять несколько объектов с разными скоростями.
  • Снижать нагрузку на GPU, если обновления не нужны каждый кадр.

Итоговые методы и события для обновления

  • two.play() — включение автообновления.
  • two.pause() — временная остановка автообновления.
  • two.update() — ручная перерисовка сцены.
  • two.bind('update', callback) — обработчик обновления кадров при автообновлении.
  • two.unbind('update', callback) — удаление обработчика.

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

Оглавление