Анимации жестов: от свайпа до долгого нажатия
Пользователь смахивает карточку, но она дёргается или не улетает за край экрана. Часто причина — неправильный расчёт порога и скорости. Или отсутствие 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 эффекта
- Определите границы контейнера.
- Вычислите отклонение за границу:
overflow = offset - bound. - Примените преобразование:
clamped = overflow * damping / (1 + overflow * 0.0015). - Верните объект при отпускании с 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 для свайпа
| Параметр | UIKit (UIPanGestureRecognizer) | SwiftUI (DragGesture) |
|---|---|---|
| Spring анимация | UIView.animate(withDuration:delay:usingSpringWithDamping:) |
.animation(.spring(response:dampingFraction:)) |
| Velocity threshold | Ручная проверка .velocity |
Доступен через DragGesture.Value |
| Сложность настройки | Средняя (требуется делегат) | Низкая (декларативно) |
Наш процесс работы
| Этап | Описание | Срок (раб. дни) |
|---|---|---|
| Аналитика | Изучение макетов и требований к анимациям | 0.5 |
| Проектирование | Создание прототипов и спецификаций жестов | 0.5 |
| Реализация | Кодирование на Swift/Kotlin с интеграцией в проект | 1–2 |
| Тестирование | Проверка на реальных устройствах, отладка | 0.5 |
| Деплой | Выкладка в TestFlight/Google Play Console | 0.5 |
Что входит в работу
- Исходный код с комментариями и документацией
- Интеграция с существующей архитектурой (если требуется)
- Настройка code signing и provisioning profiles для iOS
- Консультация по гайдлайнам App Store Review и Google Play
- Поддержка в течение 1 месяца после сдачи
Ориентиры по срокам
Реализация жестовой анимации одного типа (свайп или пинч) с spring-возвратом — 1–2 дня. Полный набор — свайп + пинч + long press с хаптиками на обеих платформах — 3–5 дней. Точную оценку дадим после ознакомления с проектом.
Получите консультацию нашего инженера по жестовой анимации для вашего приложения.