Курсоры и визуальная обратная связь

Для работы с курсорами и визуальной обратной связью в Two.js необходимо создать экземпляр Two и настроить сцену. Two.js позволяет работать с HTML <canvas>, <svg> или WebGL-рендерером. Наиболее универсальным вариантом является использование <canvas>.

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

Здесь elem — контейнер для рендеринга, params задают размеры области рисования. После создания экземпляра Two можно сразу приступить к созданию графических элементов.

Отслеживание положения курсора

Для визуальной обратной связи необходимо знать координаты мыши или касания. В стандартном случае используются события mousemove и mousedown:

let cursor = { x: 0, y: 0 };

elem.addEventListener('mousemove', (e) => {
  const rect = elem.getBoundingClientRect();
  cursor.x = e.clientX - rect.left;
  cursor.y = e.clientY - rect.top;
});

Использование getBoundingClientRect() обеспечивает корректные координаты относительно канваса, а не всей страницы. Эти координаты можно применять для управления объектами Two.js.

Создание графического представления курсора

Часто курсор отображают с помощью круга или другой геометрической фигуры:

const cursorCircle = two.makeCircle(cursor.x, cursor.y, 10);
cursorCircle.fill = '#ff0000';
cursorCircle.noStroke();

makeCircle создаёт объект с заданной позицией и радиусом. Свойства fill и noStroke позволяют настроить цвет и убрать обводку.

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

two.bind('upd ate', () => {
  cursorCircle.translation.se t(cursor.x, cursor.y);
}).play();

translation.set перемещает объект на новые координаты без пересоздания фигуры, что оптимально для производительности.

Визуальные эффекты и анимация

Two.js позволяет создавать плавные анимации с помощью интерполяции и Tween-эффектов. Например, можно добавить “след” за курсором:

const trail = [];
const maxTrail = 20;

two.bind('update', () => {
  const dot = two.makeCircle(cursor.x, cursor.y, 5);
  dot.fill = 'rgba(0, 0, 255, 0.5)';
  dot.noStroke();
  trail.push(dot);
  
  if (trail.length > maxTrail) {
    const oldDot = trail.shift();
    two.remove(oldDot);
  }
}).play();

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

Обратная связь при клике

Для наглядного подтверждения действий пользователя применяются всплывающие эффекты при клике:

elem.addEventListener('mousedown', () => {
  const clickCircle = two.makeCircle(cursor.x, cursor.y, 20);
  clickCircle.fill = 'rgba(255, 165, 0, 0.6)';
  clickCircle.noStroke();

  two.bind('update', function animateClick() {
    clickCircle.scale *= 0.9;
    clickCircle.opacity *= 0.9;
    if (clickCircle.opacity < 0.05) {
      two.remove(clickCircle);
      two.unbind('update', animateClick);
    }
  });
});

Использование масштабирования и постепенного уменьшения прозрачности создаёт визуально привлекательный эффект “всплеска”.

Использование нескольких слоёв

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

const cursorLayer = two.makeGroup(cursorCircle);
const trailLayer = two.makeGroup();

Группы позволяют управлять всеми объектами одновременно: менять прозрачность, смещать или скрывать, что удобно для сложных интерфейсов с множеством элементов обратной связи.

Смешение событий мыши и клавиатуры

Можно комбинировать визуальные эффекты курсора с клавиатурными событиями для расширенной интерактивности:

window.addEventListener('keydown', (e) => {
  if (e.key === 'Shift') {
    cursorCircle.fill = '#00ff00';
  }
});

window.addEventListener('keyup', (e) => {
  if (e.key === 'Shift') {
    cursorCircle.fill = '#ff0000';
  }
});

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

Практические рекомендации

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

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

Оглавление