Разработка анимаций жестов (свайп, пинч, долгое нажатие)

Анимации жестов: от свайпа до долгого нажатия

Пользователь смахивает карточку, но она дёргается или не улетает за край экрана. Часто причина — неправильный расчёт порога и скорости. Или отсутствие spring-возврата при выходе за границы. Мы решаем такие проблемы с помощью математических моделей: пружинные системы с демпфированием, affine transforms и haptic feedback. На практике используем spring damping=0.7, velocity=0.5, чтобы анимация felt natural. Например, в свайпе карточки для удаления визуальная обратная связь опережает палец, а не следует за ним — за счёт точной настройки порогов и скорости.

В основе жестового интерфейса (см. Gesture recognition) лежит математика. Мы применяем модели с демпфированием и жёсткостью. Наш опыт — более 50 проектов с жестовой анимацией на Swift 5.9+, Kotlin и Jetpack Compose. Как указано в Apple Human Interface Guidelines, жесты должны быть интуитивными и отзывчивыми.

Типичные ошибки, которые мы исправляем

• Отсутствие проверки скорости жеста при свайпе: без неё пользователь может случайно удалить элемент.
• Неправильный anchor point при пинче, из-за чего масштабирование идёт от центра, а не от точки касания.
• Отсутствие spring-возврата при выходе за границы: интерфейс выглядит дёрганым.
• Игнорирование haptic feedback при длительном нажатии — жест не ощущается тактильно.

Мы гарантируем, что все анимации будут соответствовать нативным стандартам платформы: на iOS — UIKit и SwiftUI, на Android — Jetpack Compose и MotionLayout. При необходимости подключаем Core Animation для оптимизации производительности. Перед началом работы проводим аудит существующей реализации — часто проблемы скрыты в конфигурации gesture recognizer или anchor point.

Закажите аудит анимаций вашего приложения — мы найдём и исправим баги.

Как реализовать свайп с пружинным завершением?

Типичный кейс — свайп карточки с dismiss-анимацией при достижении порога. Структура:

class SwipeableCardView: UIView {
    private var initialCenter: CGPoint = .zero
    private let dismissThreshold: CGFloat = 120

    @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
        let translation = gesture.translation(in: superview)
        let velocity = gesture.velocity(in: superview)

        switch gesture.state {
        case .changed:
            center = CGPoint(x: initialCenter.x + translation.x, y: initialCenter.y + translation.y)
            let progress = abs(translation.x) / dismissThreshold
            let angle = (translation.x / UIScreen.main.bounds.width) * 0.4
            transform = CGAffineTransform(rotationAngle: angle)
            alpha = 1 - min(progress * 0.3, 0.3)

        case .ended:
            let shouldDismiss = abs(translation.x) > dismissThreshold || abs(velocity.x) > 800
            if shouldDismiss {
                let direction: CGFloat = translation.x > 0 ? 1 : -1
                let targetX = direction * UIScreen.main.bounds.width * 1.5
                UIView.animate(
                    withDuration: 0.28,
                    delay: 0,
                    options: .curveEaseOut
                ) {
                    self.center.x = targetX
                    self.alpha = 0
                } completion: { _ in
                    self.removeFromSuperview()
                }
            } else {
                UIView.animate(
                    withDuration: 0.5,
                    delay: 0,
                    usingSpringWithDamping: 0.7,
                    initialSpringVelocity: 0.5
                ) {
                    self.center = self.initialCenter
                    self.transform = .identity
                    self.alpha = 1
                }
            }

        default:
            break
        }
    }
}

Velocity threshold 800 pt/s — важная деталь. Без проверки скорости пользователь, резко смахнувший на малое расстояние, получит возврат вместо dismiss. Это раздражает. А для выхода за границы мы применяем rubber band эффект: x' = x * d / (1 + x * 0.0015), где d — коэффициент упругости (0.55–0.75).

Пошаговая реализация rubber band эффекта

1. Определите границы контейнера.
2. Вычислите отклонение за границу: overflow = offset - bound.
3. Примените преобразование: clamped = overflow * damping / (1 + overflow * 0.0015).
4. Верните объект при отпускании с spring-анимацией.

Почему важен корректный anchor point при пинче?

Главная ошибка при реализации пинча — не устанавливать anchorPoint вью в точку сведения пальцев. Без этого объект масштабируется от своего центра, а не от точки касания.

@objc private func handlePinch(_ gesture: UIPinchGestureRecognizer) {
    guard let view = gesture.view else { return }
    if gesture.state == .began {
        let location = gesture.location(in: view.superview)
        let anchorX = (location.x - view.frame.minX) / view.frame.width
        let anchorY = (location.y - view.frame.minY) / view.frame.height
        view.layer.anchorPoint = CGPoint(x: anchorX, y: anchorY)
        view.center = location
    }
    let newScale = currentScale * gesture.scale
    view.transform = CGAffineTransform(scaleX: newScale, y: newScale)
    gesture.scale = 1.0
    if gesture.state == .ended {
        let clampedScale = max(minScale, min(maxScale, newScale))
        if newScale != clampedScale {
            UIView.animate(
                withDuration: 0.35,
                delay: 0,
                usingSpringWithDamping: 0.65,
                initialSpringVelocity: 0.3
            ) {
                view.transform = CGAffineTransform(scaleX: clampedScale, y: clampedScale)
            }
        }
        currentScale = clampedScale
    }
}

Смена anchorPoint сдвигает center — поэтому view.center = location обязателен сразу после изменения anchor. Для одновременной обработки пинча и панорамирования используем делегат:

func gestureRecognizer(_ a: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith b: UIGestureRecognizer) -> Bool {
    return (a is UIPinchGestureRecognizer || a is UIPanGestureRecognizer) && (b is UIPinchGestureRecognizer || b is UIPanGestureRecognizer)
}

Как добавить haptic feedback при долгом нажатии?

Long press — жест с состоянием ожидания. Визуальная анимация должна отображать «прогресс» до активации:

@objc private func handleLongPress(_ gesture: UILongPressGestureRecognizer) {
    switch gesture.state {
    case .began:
        UIImpactFeedbackGenerator(style: .medium).impactOccurred()
        UIView.animate(withDuration: 0.15) {
            self.targetView.transform = CGAffineTransform(scaleX: 0.93, y: 0.93)
        }
        startContextMenuAnimation()
    case .ended, .cancelled:
        UIView.animate(
            withDuration: 0.3,
            delay: 0,
            usingSpringWithDamping: 0.55,
            initialSpringVelocity: 8
        ) {
            self.targetView.transform = .identity
        }
    default:
        break
    }
}

Анимация уменьшения на 0.93 перед появлением контекстного меню — это паттерн из нативных iOS приложений. Она даёт пользователю визуальное подтверждение, что жест «захвачен».

Jetpack Compose: лаконичный код для жестов

В Jetpack Compose жесты реализуются через Modifier.pointerInput:

Modifier.pointerInput(Unit) {
    detectTransformGestures { _, pan, zoom, _ ->
        offsetX += pan.x
        offsetY += pan.y
        scale = (scale * zoom).coerceIn(0.5f, 3f)
    }
}

detectTransformGestures объединяет pan + pinch одним обработчиком. Для spring-возврата при выходе за границы используем Animatable с animateTo и spring.

Сравнение UIKit и SwiftUI для свайпа

Наш процесс работы

Что входит в работу

• Исходный код с комментариями и документацией
• Интеграция с существующей архитектурой (если требуется)
• Настройка code signing и provisioning profiles для iOS
• Консультация по гайдлайнам App Store Review и Google Play
• Поддержка в течение 1 месяца после сдачи

Ориентиры по срокам

Реализация жестовой анимации одного типа (свайп или пинч) с spring-возвратом — 1–2 дня. Полный набор — свайп + пинч + long press с хаптиками на обеих платформах — 3–5 дней. Точную оценку дадим после ознакомления с проектом.

Получите консультацию нашего инженера по жестовой анимации для вашего приложения.