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

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

Пользователь смахивает карточку, но она дёргается или не улетает за край экрана. Часто причина — неправильный расчёт порога и скорости. Или отсутствие 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 дней. Точную оценку дадим после ознакомления с проектом.

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