Two.Gradient

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

Линейные градиенты

Two.LinearGradient создаётся через конструктор с указанием координат начала и конца градиента, а также массивов цветов и позиций:

let linearGradient = new Two.LinearGradient(
  0, 0, 200, 0, // x1, y1, x2, y2
  new Two.Stop(0, '#ff0000'), // позиция 0, красный
  new Two.Stop(1, '#0000ff')  // позиция 1, синий
);
  • x1, y1, x2, y2 – координаты направления градиента.
  • Two.Stop(position, color, opacity) – точка перехода цвета; position от 0 до 1, color в формате HEX или CSS, opacity (необязательный) задаёт прозрачность.

Градиент можно применить к фигуре:

let rect = two.makeRectangle(100, 100, 200, 200);
rect.fill = linearGradient;
rect.noStroke();
two.update();

При изменении координат или цветов градиента в реальном времени фигура автоматически обновляет своё отображение после вызова two.update().

Радиальные градиенты

Two.RadialGradient создаёт эффект плавного расширения цвета от центра к краям:

let radialGradient = new Two.RadialGradient(
  100, 100, 0, 100, 100, 80, // cx, cy, r0, cx, cy, r1
  new Two.Stop(0, '#ffff00'), // центр, жёлтый
  new Two.Stop(1, '#ff00ff')  // край, фиолетовый
);
  • r0, r1 – радиусы внутреннего и внешнего кругов.
  • Центральная точка и радиус задают направление градиента, что позволяет создавать эффекты света и объёма.

Применение аналогично линейному:

let circle = two.makeCircle(150, 150, 80);
circle.fill = radialGradient;
circle.noStroke();
two.update();

Настройка точек градиента

Two.Stop поддерживает дополнительные параметры для точной настройки:

new Two.Stop(0.5, '#00ff00', 0.7);
  • Позиция 0.5 – середина градиента.
  • Цвет #00ff00 – зелёный.
  • Прозрачность 0.7 – полупрозрачный эффект.

Можно создавать сложные градиенты с несколькими остановками для плавного перехода через несколько цветов.

Динамическая анимация градиентов

Two.js позволяет анимировать градиенты через изменения координат и цветов:

two.bind('update', function(frameCount) {
  linearGradient.stops[0].color = `rgb(${Math.sin(frameCount * 0.05) * 127 + 128}, 0, 0)`;
  linearGradient.stops[1].color = `rgb(0, 0, ${Math.cos(frameCount * 0.05) * 127 + 128})`;
}).play();

Такой подход создаёт живые эффекты, например, переливающиеся фоны или динамически меняющиеся заливки фигур.

Интеграция градиентов с фигурами

Градиенты могут применяться не только к заливке, но и к линиям:

let line = two.makeLine(50, 50, 250, 50);
line.stroke = linearGradient;
line.linewidth = 10;
two.update();
  • stroke – устанавливает градиент для линии.
  • linewidth – ширина линии, которая визуально подчёркивает эффект градиента.

Поддерживаются прозрачные градиенты и смешение нескольких градиентов через overlay-элементы, что позволяет создавать сложные визуальные эффекты без использования сторонних библиотек.

Управление обновлениями и производительностью

Для оптимизации рекомендуется:

  • Использовать один экземпляр градиента для нескольких объектов с одинаковыми параметрами.
  • Изменять свойства градиента напрямую и вызывать two.update() только один раз после всех изменений.
  • Для анимаций применять two.bind('update', ...), избегая создания новых градиентов каждый кадр.

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

  • Линейные градиенты хорошо подходят для горизонтальных и вертикальных переходов.
  • Радиальные градиенты создают эффект объёмного освещения.
  • Множественные точки остановки (Two.Stop) позволяют плавно смешивать несколько цветов.
  • Комбинация анимации градиентов с анимацией фигур создаёт интерактивные визуальные эффекты без Canvas-фреймворков низкого уровня.

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

Оглавление