Управление жизненным циклом

Для работы с Two.js первым шагом является создание экземпляра Two, который управляет всей сценой и рендерингом. Экземпляр создается с помощью конструктора Two, которому передаются настройки рендера:

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

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

Ключевые параметры:

  • width и height — размеры канваса.
  • type — тип рендера (svg, canvas, webgl). Выбор влияет на производительность и возможности анимации.
  • domElement — HTML-элемент, к которому прикрепляется рендер.

После создания экземпляра сцена готова к добавлению фигур и объектов.

Основные методы жизненного цикла

two.update()

Метод update применяется для обновления состояния сцены вручную. Если объекты изменяются вне цикла анимации Two.js, вызов two.update() перерисует сцену с актуальными параметрами. Например:

circle.position.x += 5;
two.update();

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

two.render()

render — непосредственная отрисовка сцены в текущем состоянии. Отличается от update тем, что не обновляет внутренние анимации или физические состояния, а просто выводит текущие значения на экран:

two.render();

Используется редко, преимущественно в комбинации с two.update() для точного контроля.

two.play() и two.pause()

Two.js имеет встроенный цикл анимации, который позволяет автоматически обновлять и рендерить объекты.

  • two.play() — запускает анимацию, начиная внутренний таймер, вызывающий update и render автоматически.
  • two.pause() — останавливает анимацию, сохраняет текущие состояния объектов.

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

two.play();

// Через 3 секунды остановка
setTimeout(() => {
  two.pause();
}, 3000);

Создание анимаций с bind и update

Для динамических эффектов Two.js предоставляет метод bind или событие 'upd ate', которое вызывается каждый кадр.

two.bind('update', function(frameCount, timeDelta) {
  circle.rotation += 0.01;
}).play();

Параметры функции:

  • frameCount — количество кадров с начала анимации.
  • timeDelta — прошедшее время между кадрами, позволяет делать независимую от FPS анимацию.

Использование timeDelta обеспечивает плавность при различной производительности.

Очистка и удаление объектов

object.remove()

Каждый объект (Shape, Group, Path) может быть удален из сцены:

two.remove(circle);
two.update();

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

two.clear()

Метод clear полностью очищает сцену:

two.clear();
two.update();

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

Управление размерами и адаптивность

two.width и two.height

Изменение размеров сцены в рантайме:

two.width = window.innerWidth;
two.height = window.innerHeight;
two.update();

Масштабирование через two.scene.scale

Сцена может масштабироваться без изменения размеров DOM-элемента:

two.scene.scale = 0.5; // уменьшает все объекты в 2 раза
two.update();

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

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

const group = two.makeGroup(circle, rect);
group.translation.se t(200, 100);

two.bind('update', () => {
  group.rotation += 0.02;
}).play();
  • Изменение позиции, масштаба или вращения группы затрагивает все дочерние объекты.
  • Удаление группы через group.remove() автоматически удаляет все вложенные элементы.

Управление жизненным циклом через события

Two.js поддерживает события для объектов:

  • 'update' — вызывается на каждом кадре.
  • 'mouseover', 'mouseout', 'mousedown' — для интерактивных объектов (SVG или Canvas с поддержкой событий).

Пример:

circle._renderer.elem.addEventListener('mouseover', () => {
  circle.fill = 'red';
  two.update();
});

События позволяют реализовать сложные интерактивные сцены с динамическими эффектами.

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

  • Использовать two.pause() при длительном простое сцены.
  • Минимизировать количество вызовов update вне цикла анимации.
  • Группировать объекты для массового изменения параметров.
  • Выбирать рендер webgl для больших сцен с анимацией.

Полный пример жизненного цикла сцены

const two = new Two({ width: 800, height: 600 }).appendTo(document.body);

const circle = two.makeCircle(200, 200, 50);
circle.fill = '#00AAFF';
circle.noStroke();

const rect = two.makeRectangle(400, 300, 100, 100);
rect.fill = '#FF5500';

const group = two.makeGroup(circle, rect);

two.bind('update', (frameCount, delta) => {
  group.rotation += 0.01;
}).play();

// Через 5 секунд удаляем прямоугольник
setTimeout(() => {
  rect.remove();
}, 5000);

Этот пример демонстрирует все этапы жизненного цикла объектов: создание, анимацию, удаление и управление группой, а также интеграцию с циклом обновлений Two.js.

Оглавление