Hooks для работы с Two.js

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

Создание экземпляра Two.js и привязка его к DOM-элементу выполняется следующим образом:

const elem = document.getElementById('draw');
const params = { width: 800, height: 600 };
const two = new Two(params).appendTo(elem);

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

Типы Hooks

Two.js предоставляет несколько категорий Hooks:

  1. update – вызывается на каждом кадре анимации перед рендерингом.
  2. render – вызывается после завершения всех обновлений объектов, перед выводом на экран.
  3. remove – срабатывает при удалении объекта из сцены.
  4. change – отслеживает изменения свойств объекта (например, позиции, цвета, размера).

Hook update

Hook update — самый часто используемый, он позволяет выполнять операции на каждом кадре анимации. Основное преимущество — синхронизация логики с рендерингом без необходимости вручную вызывать two.update().

Пример использования:

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

two.bind('update', function(frameCount, deltaTime) {
  circle.rotation += 0.01;
  circle.translation.x = 400 + 100 * Math.sin(frameCount * 0.05);
});
two.play();

Здесь frameCount — количество кадров с начала анимации, а deltaTime — время в миллисекундах между кадрами. Использование этих параметров позволяет реализовать плавные и предсказуемые анимации.

Hook render

Hook render вызывается после всех обновлений объектов, что удобно для финальной коррекции визуальных свойств перед рендером:

two.bind('render', function() {
  circle.opacity = Math.abs(Math.sin(two.frameCount * 0.05));
});

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

Hook change

Hook change реагирует на модификации свойств объектов. Он полезен для динамического связывания объектов, когда изменение одного элемента должно вызывать корректировку другого.

const rect = two.makeRectangle(200, 300, 100, 50);
rect.fill = '#0080ff';
rect.noStroke();

rect.bind('change', function() {
  circle.translation.y = rect.translation.y + 100;
});

Каждое изменение свойства rect.translation.y автоматически обновляет позицию связанного круга. Hook change делает Two.js реактивной системой, аналогичной подходам в современных фреймворках.

Hook remove

Hook remove позволяет выполнять действия при удалении объектов из сцены, например, очистку ресурсов или анимацию исчезновения:

circle.bind('remove', function() {
  console.log('Круг удалён из сцены');
});

setTimeout(() => two.remove(circle), 3000);

Удаление через two.remove(object) гарантирует вызов всех связанных Hook-ов и корректное управление памятью.

Комбинирование Hooks

Hooks можно использовать совместно для создания сложных интерактивных сцен. Пример:

two.bind('update', function(frameCount) {
  rect.rotation += 0.02;
});

rect.bind('change', function() {
  circle.translation.x = rect.translation.x + Math.cos(rect.rotation) * 50;
});

two.bind('render', function() {
  circle.opacity = 0.5 + 0.5 * Math.sin(two.frameCount * 0.1);
});

В этом примере update отвечает за анимацию прямоугольника, change синхронизирует движение круга, а render создаёт плавное мерцание. Такой подход обеспечивает чистое разделение логики анимации и визуальных эффектов.

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

  • Для оптимизации производительности рекомендуется использовать Hook update только для динамических изменений, а статические корректировки применять один раз при инициализации.
  • Удаление Hooks выполняется через unbind:
two.unbind('update', updateFunction);
circle.unbind('change');
  • Hooks можно привязывать не только к сцене, но и к отдельным объектам, что позволяет создавать локализованные эффекты без глобальных изменений.

Использование Hooks в Two.js превращает библиотеку в гибкую и мощную систему анимации, где каждый объект может реагировать на изменения сцены, взаимодействовать с другими элементами и автоматически синхронизироваться с циклом рендеринга. Такой подход обеспечивает высокую производительность и удобство управления сложными сценами.

Оглавление