Базовые принципы анимации в Two.js

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

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

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

  • width и height — размеры области рендеринга.
  • autostart — автоматический запуск рендеринга и цикла анимации.
  • appendTo — привязка сцены к конкретному HTML-элементу.

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

Основные фигуры и их свойства

Two.js поддерживает множество базовых примитивов: прямоугольники, круги, линии, многоугольники и пути.

Пример создания круга:

const circle = two.makeCircle(200, 200, 50);
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 2;

Обязательные параметры для примитивов:

  • Координаты x, y задают центр объекта.
  • Размеры (радиус, ширина, высота) определяют его габариты.
  • fill и stroke управляют цветом заливки и обводки.
  • linewidth отвечает за толщину линии.

Фигуры можно объединять в группы (Two.Group), что облегчает управление сложными композициями.

Анимация свойств объектов

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

Пример анимации движения:

two.bind('upd ate', function(frameCount) {
  circle.translation.x = 200 + 100 * Math.sin(frameCount * 0.05);
  circle.translation.y = 200 + 100 * Math.cos(frameCount * 0.05);
}).play();

Особенности:

  • frameCount — номер текущего кадра, который увеличивается с каждой итерацией.
  • translation — смещение объекта по осям x и y.
  • Использование математических функций (sin, cos) позволяет создавать циклические движения.

Для анимации можно изменять любые свойства: цвет, прозрачность, масштаб, угол поворота.

Интерполяция и плавные переходы

Для плавного изменения свойств можно использовать линейную интерполяцию (LERP). Это особенно полезно для анимации цвета или позиции без резких скачков.

Пример линейной интерполяции позиции:

let targetX = 400;

two.bind('update', function() {
  circle.translation.x += (targetX - circle.translation.x) * 0.05;
});
  • 0.05 — скорость интерполяции (чем меньше, тем медленнее переход).
  • Текущая координата постепенно приближается к целевой.

Аналогично можно интерполировать fill цвета с помощью объектов Two.Color.

Использование кривых и сложных траекторий

Two.js позволяет задавать сложные движения с помощью кривых Безье или массивов координат.

Пример движения по кривой Безье:

const path = two.makePath(50, 50, 300, 100, 200, 400, 500, 300, true);
path.stroke = '#0000FF';
path.linewidth = 2;

let t = 0;
two.bind('update', function() {
  t += 0.01;
  const p = path.getPointAt(t % 1);
  circle.translation.se t(p.x, p.y);
});
  • getPointAt(t) возвращает точку на кривой для параметра t от 0 до 1.
  • Можно циклично перемещать объекты по сложным траекториям.

Управление временем и кадрами

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

  • two.frameCount — общий счетчик кадров.
  • two.timeDelta — время между кадрами в миллисекундах.
  • Можно изменять скорость анимации, масштабируя шаги изменения свойств через timeDelta.

Пример плавного вращения с учетом времени:

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

Комбинирование трансформаций

Свойства translation, rotation, scale могут комбинироваться. Two.js автоматически применяет их последовательно, что позволяет создавать сложные эффекты.

  • circle.scale = 1.5 — увеличивает размер объекта в 1.5 раза.
  • circle.rotation = Math.PI / 4 — поворот на 45 градусов.
  • Смещение (translation) не влияет на поворот и масштабирование.

Для анимаций комбинированного движения часто используют математику синусов и косинусов вместе с масштабированием и вращением.

Управление анимацией: play, pause, stop

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

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

Эффекты прозрачности и цвета

Свойства opacity и fill могут анимироваться для создания плавных визуальных эффектов.

two.bind('update', function(frameCount) {
  circle.opacity = 0.5 + 0.5 * Math.sin(frameCount * 0.05);
  circle.fill = new Two.Color(`hsl(${frameCount % 360}, 100%, 50%)`);
});
  • opacity принимает значения от 0 до 1.
  • Использование HSL позволяет циклически менять оттенок цвета.

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

Two.Group позволяет объединять несколько объектов и анимировать их как единое целое:

const group = two.makeGroup(circle, two.makeRectangle(300, 300, 50, 50));
group.translation.x = 100;
group.rotation = Math.PI / 6;
  • Все дочерние объекты наследуют трансформации группы.
  • Удобно для создания сложных композиций и анимации сразу нескольких элементов.

Итоговые принципы

  1. Все анимации строятся через цикл обновления сцены (update).
  2. Свойства объектов могут изменяться плавно с помощью интерполяции.
  3. Для сложных движений используют кривые, группы и комбинированные трансформации.
  4. Управление временем и кадрами позволяет создавать стабильные анимации на любых устройствах.
  5. Цвет, прозрачность и масштаб легко анимировать через встроенные объекты Two.js.
Оглавление