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. Попробуй заменить цвет и посмотреть, как меняется характер интерфейса