Поворот

В библиотеке Two.js каждый объект, будь то примитивная фигура или группа элементов, имеет свойство rotation, определяющее угол поворота в радианах. Значение по умолчанию равно 0, что соответствует исходной ориентации объекта. Поворот осуществляется относительно центра объекта, который можно задать явно через свойства translation.x и translation.y или через встроенный центр фигуры.

const circle = two.makeCircle(0, 0, 50);
circle.rotation = Math.PI / 4; // Поворот на 45 градусов

Система координат и центр поворота

В Two.js координаты задаются относительно осей X и Y холста. Для правильного вращения важно понимать:

  • translation – позиция центра объекта.
  • rotation – угол поворота объекта относительно его центра.
  • pivot – точка, вокруг которой происходит вращение (по умолчанию центр объекта).

Если требуется вращение вокруг другой точки, можно создать группу:

const group = two.makeGroup(circle);
group.translation.set(100, 100);
group.rotation = Math.PI / 2; // Поворот всей группы на 90 градусов

Постепенная анимация вращения

Two.js позволяет изменять свойство rotation в реальном времени, что удобно для создания анимаций. Для плавного вращения можно использовать метод bind и функцию обновления на каждом кадре:

two.bind('upd ate', function(frameCount) {
  circle.rotation += 0.02; // Постепенный поворот
}).play();

Важные моменты:

  • Значение rotation увеличивается непрерывно, что позволяет создавать бесконечные вращения.
  • Углы задаются в радианах. Для перевода градусов в радианы используется формула: radians = degrees * Math.PI / 180.

Вращение сложных фигур

Для многоугольников или пользовательских форм поворот работает аналогично. Важно учитывать:

  • origin фигуры: все вершины вращаются относительно центра объекта.
  • группы: если несколько объектов объединены в группу, вращение группы изменяет положение всех объектов одновременно.
const rect1 = two.makeRectangle(0, 0, 60, 30);
const rect2 = two.makeRectangle(50, 50, 30, 60);
const group = two.makeGroup(rect1, rect2);
group.rotation = Math.PI / 3; // Поворот группы на 60 градусов

Связь с трансформациями

Rotation в Two.js является частью матрицы трансформации объекта, которая также учитывает scale и translation. Порядок применения трансформаций:

  1. Масштабирование (scale)
  2. Поворот (rotation)
  3. Смещение (translation)

Это важно при комбинировании нескольких эффектов. Неправильный порядок может привести к неожиданным результатам.

Вращение по пользовательской точке

Для вращения относительно точки, отличной от центра, применяется комбинация смещения и вращения:

circle.translation.se t(150, 150);
circle.rotation = Math.PI / 4; // Вращение на 45 градусов
circle.translation.set(circle.translation.x + 50, circle.translation.y + 50); // Сдвиг центра вращения

Для более удобного контроля создаются группы, куда помещаются фигуры и задается центр группы.

Использование библиотек-анимаций с Two.js

Для сложных эффектов вращения часто используют внешние библиотеки, такие как GSAP:

gsap.to(circle, { rotation: Math.PI * 2, duration: 2, repeat: -1, ease: "linear" });

Это позволяет создавать непрерывные вращения с точной временной шкалой, без необходимости вручную обновлять rotation на каждом кадре.

Практические советы

  • Проверять центр вращения (translation) перед применением rotation.
  • Для групп лучше задавать вращение на уровне группы, чтобы сохранить относительное расположение объектов.
  • При анимации использовать малые приращения rotation для плавности.
  • Конвертировать углы в радианы, чтобы избежать ошибок при математических операциях.

Итоговые свойства, связанные с поворотом

Свойство Описание
rotation Угол поворота в радианах
translation Положение центра объекта
pivot Точка, вокруг которой выполняется поворот
group Объединяет объекты для совместного вращения

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

Оглавление