Жесты swipe

Библиотека Zepto является лёгкой альтернативой jQuery и поддерживает работу с событиями, включая пользовательские события для сенсорных устройств. Жесты swipe — это один из ключевых элементов взаимодействия на мобильных устройствах, который позволяет реагировать на горизонтальные движения пальца по экрану. Zepto предоставляет базовые механизмы для реализации этих жестов через модуль touch, который расширяет стандартные события touchstart, touchmove и touchend.

Основные события и структура жеста

Для распознавания swipe необходимо учитывать три основных события:

  • touchstart — фиксирует начальную точку касания, время начала и идентификатор касания.
  • touchmove — отслеживает перемещение пальца, позволяет вычислить смещение по осям X и Y.
  • touchend — завершает жест, на основе смещения и времени определяет направление и силу свайпа.

Ключевые параметры для определения swipe:

  • startX, startY — координаты начала касания.
  • endX, endY — координаты конца движения.
  • distX, distY — разница по горизонтали и вертикали: distX = endX - startX.
  • elapsedTime — время между началом и концом жеста.
  • threshold — минимальное расстояние для признания движения свайпом (например, 50px).
  • restraint — максимальное допустимое смещение по другой оси для корректного распознавания (например, 100px).
  • allowedTime — максимальное время жеста, чтобы он считался swipe (например, 300–500 мс).

Обработка свайпа с Zepto

Zepto позволяет работать напрямую с событиями касания:

var touchsurface = $('#element');
var startX, startY, distX, distY, startTime;

touchsurface.on('touchstart', function(e) {
    var touchobj = e.originalEvent.touches[0];
    startX = touchobj.pageX;
    startY = touchobj.pageY;
    startTime = new Date().getTime();
    e.preventDefault();
});

touchsurface.on('touchmove', function(e) {
    e.preventDefault(); // предотвращает скроллинг страницы
});

touchsurface.on('touchend', function(e) {
    var touchobj = e.originalEvent.changedTouches[0];
    distX = touchobj.pageX - startX;
    distY = touchobj.pageY - startY;
    var elapsedTime = new Date().getTime() - startTime;

    var threshold = 50; // минимальная дистанция для swipe
    var restraint = 100; // максимальная отклонение по другой оси
    var allowedTime = 300; // максимальная длительность жеста

    if (elapsedTime <= allowedTime) {
        if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
            if (distX > 0) {
                console.log('Swipe вправо');
            } else {
                console.log('Swipe влево');
            }
        }
        if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
            if (distY > 0) {
                console.log('Swipe вниз');
            } else {
                console.log('Swipe вверх');
            }
        }
    }
    e.preventDefault();
});

Использование плагинов для swipe

Zepto поддерживает подключаемые модули, включая touch.js, который упрощает обработку жестов. Плагин автоматически создаёт события swipe, swipeLeft, swipeRight, swipeUp и swipeDown.

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

$('#element').on('swipeLeft', function() {
    console.log('Свайп влево обработан плагином');
});

$('#element').on('swipeRight', function() {
    console.log('Свайп вправо обработан плагином');
});

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

  • Отсутствие необходимости вручную вычислять смещение и время.
  • Автоматическое распознавание направления жеста.
  • Чистый и компактный код, удобный для масштабирования.

Настройка чувствительности и параметров

В модуле touch можно изменять пороги для свайпа:

$.fn.swipe.defaults = {
    threshold: 75, // минимальная дистанция
    maxTime: 500, // максимальная длительность жеста
    restraint: 100 // допустимое смещение по другой оси
};

Эти параметры позволяют адаптировать распознавание жестов под конкретное устройство и поведение пользователя.

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

  • Отмена скроллинга: e.preventDefault() в touchmove предотвращает конфликт с вертикальной прокруткой страницы.
  • Сочетание с анимациями: свайпы часто используют для перелистывания слайдов, где важно учитывать плавность движения и время реакции.
  • Поддержка нескольких пальцев: при необходимости можно отслеживать e.touches для реализации multi-swipe жестов.
  • Тестирование на разных устройствах: чувствительность жеста может различаться на экранах с высокой и низкой плотностью пикселей.

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

Оглавление