Touch события и жесты

Angular предоставляет встроенные механизмы работы с touch-событиями, которые критически важны для мобильных устройств и сенсорных экранов. Основные события включают:

  • touchstart — касание экрана
  • touchend — завершение касания
  • touchmove — движение пальца по экрану
  • touchcancel — прерывание касания (например, вызвано системой)

Привязка событий

События привязываются через синтаксис шаблона Angular:

<div
  (touchstart)="onTouchStart($event)"
  (touchmove)="onTouchMove($event)"
  (touchend)="onTouchEnd($event)">
</div>

В обработчиках событий можно использовать объект TouchEvent, который содержит массив touches, targetTouches и changedTouches. Эти массивы позволяют отслеживать координаты касаний и идентификаторы пальцев.

onTouchMove(event: TouchEvent) {
  const touch = event.touches[0];
  console.log(`X: ${touch.clientX}, Y: ${touch.clientY}`);
}

Жесты

Для работы с жестами удобно использовать HammerJS, интегрированный с Angular через @angular/platform-browser. Он предоставляет события типа:

  • pan — перемещение
  • pinch — масштабирование
  • rotate — вращение
  • swipe — быстрый смах
  • tap — короткое нажатие
  • press — длительное нажатие

Пример использования HammerJS в Angular:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = {
    swipe: { direction: 31 }, // разрешены все направления
  };
}

В шаблоне:

<div (swipe)="onSwipe($event)" (pinch)="onPinch($event)"></div>

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

Комбинирование анимаций с жестами

Angular позволяет синхронизировать анимации и жесты, например, плавное перемещение элемента при свайпе или масштабирование при pinch. Для этого достаточно изменять состояние анимации через trigger и state в зависимости от координат, полученных из touch-события. Это создает высокоинтерактивные и отзывчивые пользовательские интерфейсы, подходящие для современных мобильных приложений.

Оглавление