Градиенты: линейные и радиальные

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

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

Линейный градиент определяется прямой линией, вдоль которой происходит переход цвета. Основные параметры:

  • x1, y1 — координаты начала градиента
  • x2, y2 — координаты конца градиента
  • stops — массив объектов, определяющих цвета и позиции перехода

Пример создания линейного градиента:

const gradient = new Two.LinearGradient(
  0, 0, 100, 0, // координаты начала и конца
  [
    new Two.Stop(0, '#ff0000'), // красный в начале
    new Two.Stop(1, '#0000ff')  // синий в конце
  ]
);

const rect = two.makeRectangle(200, 200, 150, 150);
rect.fill = gradient;
rect.noStroke();

Ключевые моменты:

  • Параметры x1, y1, x2, y2 задаются в локальной системе координат объекта.
  • Two.Stop(offset, color) принимает offset от 0 до 1, где 0 соответствует началу, а 1 — концу градиента.
  • Можно использовать несколько остановок (stops) для сложных цветовых переходов.

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

Радиальный градиент создается вокруг центральной точки и распространяется по радиусу. Основные параметры:

  • x, y — координаты центра градиента
  • r0 — внутренний радиус (обычно 0)
  • r1 — внешний радиус
  • stops — массив цветовых остановок

Пример радиального градиента:

const radial = new Two.RadialGradient(
  100, 100, 0, 50, // центр (x, y), r0 и r1
  [
    new Two.Stop(0, '#ffffff'), // белый центр
    new Two.Stop(1, '#000000')  // черный по краю
  ]
);

const circle = two.makeCircle(100, 100, 50);
circle.fill = radial;
circle.noStroke();

Особенности радиального градиента:

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

Использование прозрачности в градиентах

Оба типа градиентов поддерживают RGBA-цвета, что позволяет создавать плавные переходы с прозрачностью:

const gradient = new Two.LinearGradient(
  0, 0, 100, 0,
  [
    new Two.Stop(0, 'rgba(255,0,0,1)'),
    new Two.Stop(1, 'rgba(0,0,255,0)')
  ]
);

Такой градиент может использоваться для мягкого наложения объектов или создания эффекта исчезания.

Анимация градиентов

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

two.bind('update', function(frameCount) {
  gradient.x1 = Math.sin(frameCount * 0.05) * 50;
  gradient.x2 = 100 + Math.sin(frameCount * 0.05) * 50;
}).play();

Примечания:

  • Анимация возможна через привязку к событию update.
  • Изменяя координаты градиента или цвета остановок, можно создавать эффекты перелива или мерцания.
  • Для радиальных градиентов можно анимировать центр и радиусы r0 и r1.

Комбинирование градиентов с фигурами

Градиенты применяются к любым объектам Two.js: прямоугольникам, кругам, многоугольникам, линиям.

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

const polygon = two.makePolygon(300, 300, 60, 6); // шестиугольник
const linear = new Two.LinearGradient(0, 0, 0, 100, [
  new Two.Stop(0, '#00ff00'),
  new Two.Stop(1, '#ff00ff')
]);
polygon.fill = linear;
polygon.noStroke();

Советы по работе:

  • Если объект перемещается, градиент остаётся привязанным к локальным координатам объекта.
  • Для сложных визуальных эффектов можно комбинировать несколько градиентов на разных объектах.
  • Градиенты совместимы с прозрачностью, масками и слоями Two.js.

Настройка и оптимизация

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

Линейные и радиальные градиенты в Two.js — мощный инструмент для визуального оформления, а правильное управление их параметрами позволяет создавать динамичные, яркие и плавные визуальные эффекты.

Оглавление