Использование GSAP

Two.js предоставляет удобный API для работы с 2D-графикой на Canvas, SVG и WebGL. Для создания динамических и интерактивных анимаций часто используется библиотека GSAP (GreenSock Animation Platform). GSAP обеспечивает высокую производительность, плавность и удобное управление временными шкалами анимаций.

Взаимодействие двух библиотек строится на манипуляции свойствами объектов Two.js через GSAP. Основные объекты Two.js, такие как Two.Circle, Two.Rectangle, Two.Path и группы Two.Group, имеют свойства, которые можно анимировать напрямую.

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

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

  • translation — объект с x и y, задающий позицию.
  • rotation — угол поворота в радианах.
  • scale — масштаб по осям x и y.
  • opacity — прозрачность.
  • fill и stroke — цвета заливки и контура.

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

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

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

two.update();

gsap.to(circle.translation, {
  x: 600,
  y: 450,
  duration: 2,
  ease: "power2.inOut",
  onUpdate: () => two.update()
});

Здесь GSAP анимирует объект translation по осям x и y. Ключевой момент: каждое изменение свойств требует вызова two.update(), чтобы изменения отразились на холсте.

Анимация нескольких свойств одновременно

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

gsap.to(circle, {
  duration: 3,
  rotation: Math.PI * 2,
  scaleX: 2,
  scaleY: 0.5,
  opacity: 0.3,
  fill: "#4A90E2",
  onUpdate: () => two.update()
});
  • rotation задается в радианах.
  • scaleX и scaleY масштабируют объект по отдельным осям.
  • Цвета (fill, stroke) GSAP автоматически интерполирует.

Использование временных шкал GSAP (Timeline)

Для сложных последовательностей анимаций удобно использовать gsap.timeline():

const tl = gsap.timeline({ repeat: -1, yoyo: true });

tl.to(circle.translation, { x: 700, y: 200, duration: 1 })
  .to(circle, { rotation: Math.PI, scale: 1.5, duration: 1 })
  .to(circle, { fill: "#E94E77", duration: 0.5 });

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

  • repeat: -1 — бесконечное повторение.
  • yoyo: true — возврат к исходному состоянию после завершения каждой итерации.
  • Timeline позволяет выстраивать последовательные анимации, избегая необходимости вручную рассчитывать задержки.

Анимация групп объектов

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

const group = two.makeGroup(circle, two.makeRectangle(400, 300, 100, 50));
gsap.to(group.translation, { x: 200, y: 100, duration: 2, onUpdate: () => two.update() });

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

Анимация кривых и вершин (Two.Path)

Для объектов типа Two.Path или Two.Polygon можно анимировать отдельные вершины:

const polygon = two.makePolygon(300, 300, 6, 80);

gsap.to(polygon.vertices, {
  duration: 2,
  0: { x: 350, y: 250 },
  1: { x: 320, y: 200 },
  2: { x: 400, y: 220 },
  onUpdate: () => two.update()
});
  • Массив vertices содержит объекты с x и y.
  • Можно анимировать каждую вершину отдельно, создавая органические деформации.
  • Важно обновлять Two.js через two.update() после каждого кадра.

Сочетание GSAP с событиями

GSAP поддерживает колбэки:

  • onStart — при запуске анимации.
  • onUpdate — на каждом кадре анимации.
  • onComplete — по завершении анимации.

Пример:

gsap.to(circle, {
  duration: 1.5,
  scale: 0.5,
  onStart: () => console.log("Анимация началась"),
  onComplete: () => console.log("Анимация завершена"),
  onUpdate: () => two.update()
});

Колбэки позволяют синхронизировать другие действия или запускать дополнительные анимации.

Секреты плавной анимации

  1. Вызов two.update() на каждом кадре обязателен для отражения изменений.
  2. Использование gsap.timeline() упрощает сложные последовательности.
  3. Анимация группы объектов экономит ресурсы и упрощает управление сценой.
  4. Цветовые интерполяции GSAP работают напрямую с fill и stroke.
  5. Анимация вершин позволяет создавать динамичные, деформируемые формы.

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

Оглавление