title

Теория

Анимация делает интерфейс живым. События позволяют реагировать на действия пользователя: клик, наведение, движение мыши или нажатие клавиши. Вместе они создаютинтерактивные системы, в которых экран уже не остаётся статичным. В этом уроке ты свяжешь событие и движение: элемент будет перемещаться по клику.

Событие — это сигнал о том, что что-то произошло. Например, пользователь нажал мышью, и код получил команду среагировать. В Vanilla JSэто обычно делается черезaddEventListener(). Так программа начинает не просто показывать элементы, а взаимодействовать с человеком.

Само по себе изменение координат происходит мгновенно. Чтобы движение выглядело плавно, используется свойствоtransition. Оно задаёт, как быстро и каким образом будет меняться стиль элемента. За счёт этого интерфейс начинает реагировать не резко, а мягко и заметно.

app.addEventListener("click", (event) => {
  ball.style.left = event.clientX + "px";
  ball.style.top = event.clientY + "px";
});

Здесь контейнер слушает событиеclick. Когда пользователь нажимает внутри области, код получает координаты этого клика и переносит элемент в новую точку. Если у элемента уже заданtransition, перемещение будет выглядеть как анимация. Так одно событие превращается в видимое поведение.

Ниже ты сначала увидишь самый простой вариант: элемент перемещается по клику. Потом к движению добавится изменение масштаба и цвета. Так одна простая техника постепенно превратится в более выразительное интерактивное поведение.

Техника

Начнём с одного элемента. По клику внутри области он будет плавно перемещаться в новую точку. Это базовая связка из события и анимации.

Здесь внутриappсоздаётся один круглый элемент. Контейнер слушает клик и получает координаты курсора, а элемент плавно переезжает в новую точку. Анимация возникает не сама по себе, а за счёт свойстваtransition. Это самый простой способ сделать интерфейс живым.

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

Здесь по клику меняется не только положение, но и визуальное состояние элемента. Круг слегка увеличивается, а затем возвращается к исходному масштабу. Дополнительно меняется цвет, поэтому реакция становится более заметной. Один и тот же жест пользователя теперь запускает сразу несколько изменений.

Вывод

1. Событиеclickпозволяет запускать действие по жесту пользователя
2. Свойствоtransitionпревращает мгновенное изменение в анимацию
3. Даже один элемент может стать интерактивной системой, если связать событие и стиль

Задание

Попробуй изменить характер движения самостоятельно. В коде ниже уже есть несколько вариантов для эксперимента — тебе нужно раскомментировать строки и посмотреть, как меняется поведение элемента. Обрати внимание на скорость, форму и визуальную реакцию.

1. Раскомментируй изменениеborderRadius, чтобы круг становился квадратом
2. Попробуй изменитьtransition, чтобы движение стало быстрее или медленнее
3. Раскомментируйrotate(), чтобы элемент поворачивался при каждом клике
4. Попробуй заменить цвет и посмотреть, как меняется характер интерфейса