Использование Anime.js

Для начала работы с Two.js необходимо подключить библиотеку. Обычно это делается через CDN или установкой через npm:

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.0/two.min.js"></script>

Или через npm:

npm install two.js

После подключения создаётся экземпляр Two с настройками сцены:

const elem = document.getElementById('draw-shapes');
const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // Можно использовать 'webgl' или 'canvas'
}).appendTo(elem);

Параметры конструктора:

  • width и height — размеры области рисования.
  • type — тип рендеринга (svg, canvas, webgl).
  • autostart — автоматически ли запускать анимацию.

Основные примитивы

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

  • Прямоугольник:
const rect = two.makeRectangle(200, 100, 150, 80);
rect.fill = '#FF8000';
rect.stroke = '#000000';
rect.linewidth = 4;
  • Круг:
const circle = two.makeCircle(400, 200, 50);
circle.fill = '#00BFFF';
circle.stroke = '#000';
circle.linewidth = 3;
  • Эллипс:
const ellipse = two.makeEllipse(600, 150, 80, 40);
ellipse.fill = '#32CD32';
ellipse.stroke = '#000';
ellipse.linewidth = 2;
  • Линия и полилиния:
const line = two.makeLine(100, 300, 300, 350);
line.stroke = '#FF1493';
line.linewidth = 5;

const path = two.makePath(400, 400, 500, 450, 600, 400, true);
path.fill = 'none';
path.stroke = '#8A2BE2';
path.linewidth = 4;
  • Полигон:
const polygon = two.makePolygon(700, 400, 50, 5); // центр, радиус, количество сторон
polygon.fill = '#FFD700';
polygon.stroke = '#000';
polygon.linewidth = 3;

Каждая фигура создаётся методом makeShape, и возвращаемый объект можно анимировать или модифицировать.

Работа с трансформациями

Two.js поддерживает следующие трансформации для объектов:

  • position — позиция центра (shape.position.set(x, y)).
  • scale — масштаб (shape.scale = 2 или shape.scale = new Two.Vector(2, 1.5)).
  • rotation — вращение в радианах (shape.rotation = Math.PI / 4).
  • translation через shape.translation или изменение position.

Пример вращения:

two.bind('upd ate', function(frameCount) {
  rect.rotation += 0.01;
}).play();

Работа с цветами и градиентами

Цвет можно задавать через fill и stroke. Для градиентов используется Two.Gradient:

const gradient = two.makeLinearGradient(0, 0, 0, 100, 
  new Two.Stop(0, '#FF0000'), 
  new Two.Stop(1, '#0000FF')
);
circle.fill = gradient;

Типы градиентов:

  • LinearGradient — линейный градиент.
  • RadialGradient — радиальный градиент.

Анимация свойств с помощью Two.js

Two.js имеет встроенный механизм анимации через Two.bind('update', callback) и two.play():

two.bind('update', function(frameCount) {
  circle.scale = 1 + Math.sin(frameCount * 0.05) * 0.5;
  rect.rotation += 0.02;
}).play();
  • frameCount — количество кадров с начала анимации.
  • Анимация выполняется в основном цикле рендеринга.

Интеграция с Anime.js

Anime.js позволяет создавать плавные анимации без необходимости вручную управлять кадрами. Примеры интеграции:

anime({
  targets: circle,
  scale: 2,
  duration: 2000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad',
  update: function(anim) {
    two.update(); // Обновление сцены Two.js
  }
});

Особенности работы:

  • targets — объекты Two.js. Используются свойства position, rotation, scale, opacity, fill (для цвета).
  • duration — время анимации в миллисекундах.
  • direction — alternate для обратной анимации.
  • loop — бесконечное повторение.
  • easing — функция плавности анимации.

Пример анимации цвета:

anime({
  targets: rect,
  fill: ['#FF8000', '#32CD32'],
  duration: 3000,
  direction: 'alternate',
  loop: true,
  easing: 'linear',
  update: () => two.update()
});
  • Цвета можно задавать в формате HEX или RGB. Anime.js плавно интерполирует значения.

Работа с группами объектов

Two.js поддерживает группировку объектов через Two.Group:

const group = two.makeGroup(circle, rect, ellipse);
group.translation.se t(100, 50);
group.rotation = Math.PI / 8;

Анимация группы через Anime.js:

anime({
  targets: group.translation,
  x: 400,
  y: 300,
  duration: 2500,
  easing: 'easeInOutSine',
  update: () => two.update()
});
  • Вся группа движется как единый объект, сохраняя внутренние трансформации отдельных фигур.

Работа с кривыми и динамическими линиями

Two.js позволяет создавать линии с кривыми Bezier и Spline:

const curve = two.makeCurve(
  new Two.Anchor(50, 400, 150, 350, 250, 450),
  new Two.Anchor(300, 400, 350, 350, 450, 450),
  true
);
curve.stroke = '#FF4500';
curve.linewidth = 4;
  • Для анимации кривых можно изменять координаты Anchor через Anime.js:
anime({
  targets: curve.vertices,
  0: { x: 100, y: 350 },
  1: { x: 400, y: 400 },
  duration: 2000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad',
  update: () => two.update()
});
  • Каждый vertex кривой является отдельной точкой с координатами (x, y).

Интерактивность и события

Two.js поддерживает привязку событий через стандартный DOM или через Two.Events:

circle._renderer.elem.addEventListener('click', () => {
  anime({
    targets: circle,
    scale: 3,
    duration: 1000,
    easing: 'easeOutElastic',
    update: () => two.update()
  });
});
  • _renderer.elem — элемент SVG или Canvas, используемый для рендеринга.
  • События можно комбинировать с анимацией Anime.js для динамических эффектов.

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

  • Для плавной работы сцены при множестве объектов лучше использовать Two.Types.webgl.
  • Часто обновлять сцену через two.update() при анимации Anime.js.
  • Анимация цвета требует передачи массива значений [startColor, endColor].
  • Группы объектов упрощают сложные движения и вращения.
  • Использование кривых позволяет создавать органические анимации, плавно изменяя координаты вершин.

Хотите, я могу подготовить следующий блок с комплексным примером сцены с несколькими анимированными фигурами и кривыми, который объединяет все вышеописанные приёмы?

Оглавление