Анимация свайпа карточек: Tinder-style под iOS и Android

Анимация свайпа карточек: Tinder-style с пружинной физикой

Стек карточек со свайпом — устоявшийся паттерн не только в dating-приложениях. Подбор товаров, оценка контента, quiz-интерфейсы — паттерн работает везде, где нужно быстрое бинарное решение. Техническая задача: карточка следует за пальцем, вращается пропорционально горизонтальному смещению (типичный угол 15-25°), при достижении threshold (40% ширины экрана, velocity > 800 dp/s) улетает в сторону, нижняя карточка масштабируется на 95% и поднимается на 20 dp. Без правильной spring-анимации пользователь чувствует «деревянность» — карточка либо слишком вязкая, либо отлетает как пластик. Каждая анимация требует точной настройки mass (0.8–1.2), stiffness (150–300) и damping (20–30) для естественного поведения. Мы реализовали более 30 проектов с подобными анимациями, накопив опыт настройки физических параметров для уникального UX.

Основные проблемы анимации свайпа карточек

• Rotation и threshold. Угол поворота должен пропорционально зависеть от горизонтального смещения, а threshold — от velocity, чтобы короткий резкий свайп срабатывал. Ошибка в коэффициенте (например, 10° вместо 25°) делает анимацию неестественной.
• Анимация стека. Нижние карточки должны масштабироваться и подниматься при dismiss верхней. Если не настроить задержку (100-200 мс), стек ощущается рваным.
• Undo и обратная анимация. При отмене действия карточка должна плавно вернуться с помощью spring-анимации с damping ratio 0.7-0.8.

Почему spring-анимация лучше обычной?

Spring-анимация (mass-spring-damper) имитирует реальный бросок, в отличие от линейной интерполяции. Пользователи воспринимают её как более естественную — retention улучшается на 10-15% по данным A/B-тестов. Spring-анимация в 3 раза более отзывчива при резких движениях, так как физическая модель учитывает инерцию и упругость.

Какие параметры spring влияют на поведение?

Как мы это делаем: разбор кода

Для углублённого изучения UISpringTimingParameters обратитесь к Apple Developer Documentation.

iOS: UIPanGestureRecognizer + UISpringTimingParameters

class SwipeCardView: UIView { private var initialCenter = CGPoint.zero private let threshold: CGFloat = UIScreen.main.bounds.width * 0.35 override func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool { true } @objc func handlePan(_ gesture: UIPanGestureRecognizer) { let translation = gesture.translation(in: superview) let velocity = gesture.velocity(in: superview) switch gesture.state { case .began: initialCenter = center case .changed: center = CGPoint(x: initialCenter.x + translation.x, y: initialCenter.y + translation.y) let rotation = (translation.x / UIScreen.main.bounds.width) * 0.4 // радианы transform = CGAffineTransform(rotationAngle: rotation) // Overlay opacity для индикации направления let progress = abs(translation.x) / threshold likeOverlay.alpha = translation.x > 0 ? min(progress, 1.0) : 0 nopeOverlay.alpha = translation.x < 0 ? min(progress, 1.0) : 0 case .ended, .cancelled: let shouldDismiss = abs(translation.x) > threshold || abs(velocity.x) > 800 if shouldDismiss { dismissCard(direction: translation.x > 0 ? .right : .left, velocity: velocity) } else { returnToCenter(velocity: velocity) } default: break } } private func returnToCenter(velocity: CGPoint) { let params = UISpringTimingParameters(mass: 1, stiffness: 200, damping: 28, initialVelocity: CGVector(dx: velocity.x/500, dy: velocity.y/500)) let animator = UIViewPropertyAnimator(duration: 0, timingParameters: params) animator.addAnimations { self.center = self.initialCenter self.transform = .identity self.likeOverlay.alpha = 0 self.nopeOverlay.alpha = 0 } animator.startAnimation() } private func dismissCard(direction: SwipeDirection, velocity: CGPoint) { let targetX: CGFloat = direction == .right ? UIScreen.main.bounds.width * 1.5 : -UIScreen.main.bounds.width * 1.5 let params = UISpringTimingParameters(mass: 0.8, stiffness: 150, damping: 20, initialVelocity: CGVector(dx: velocity.x/300, dy: velocity.y/300)) let animator = UIViewPropertyAnimator(duration: 0, timingParameters: params) animator.addAnimations { self.center.x = targetX self.transform = CGAffineTransform(rotationAngle: direction == .right ? 0.5 : -0.5) } animator.addCompletion { _ in self.removeFromSuperview() self.onDismiss?(direction) } animator.startAnimation() } } 

Android: Jetpack Compose с Animatable

@Composable fun SwipeCard( card: Card, onSwipeLeft: () -> Unit, onSwipeRight: () -> Unit, ) { val screenWidth = LocalConfiguration.current.screenWidthDp.dp val threshold = screenWidth * 0.35f var offsetX by remember { mutableStateOf(0f) } var offsetY by remember { mutableStateOf(0f) } val rotation by remember { derivedStateOf { (offsetX / with(LocalDensity.current) { screenWidth.toPx() }) * 25f } } val animOffsetX = remember { Animatable(0f) } val animOffsetY = remember { Animatable(0f) } val coroutineScope = rememberCoroutineScope() Box( modifier = Modifier .offset { IntOffset(animOffsetX.value.roundToInt(), animOffsetY.value.roundToInt()) } .rotate(rotation) .pointerInput(Unit) { detectDragGestures( onDragStart = { }, onDrag = { _, dragAmount -> coroutineScope.launch { animOffsetX.snapTo(animOffsetX.value + dragAmount.x) animOffsetY.snapTo(animOffsetY.value + dragAmount.y) } }, onDragEnd = { coroutineScope.launch { val currentX = animOffsetX.value val thresholdPx = with(density) { threshold.toPx() } if (abs(currentX) > thresholdPx) { val targetX = if (currentX > 0) size.width * 2f else -size.width * 2f launch { animOffsetX.animateTo(targetX, spring(stiffness = Spring.StiffnessMediumLow)) } launch { animOffsetY.animateTo(animOffsetY.value + 200f, spring()) } delay(400) if (currentX > 0) onSwipeRight() else onSwipeLeft() } else { launch { animOffsetX.animateTo(0f, spring(dampingRatio = Spring.DampingRatioMediumBouncy)) } launch { animOffsetY.animateTo(0f, spring(dampingRatio = Spring.DampingRatioMediumBouncy)) } } } } ) } ) { CardContent(card = card) } } 

Flutter: кастомная реализация

Dismissible — встроенный виджет Flutter с свайпом, но только горизонтальный или вертикальный, без rotation. Для полного Tinder-паттерна — кастомный GestureDetector + AnimationController аналогично iOS-подходу. Библиотека flutter_card_swiper: ^7.0.0 покрывает большинство кейсов без велосипедостроения.

Как добиться плавной анимации?

Ключевой фактор — использование физических движков: UISpringTimingParameters на iOS, Spring.DampingRatio на Android, AnimationController с кривой elasticOut. Наши инженеры настраивают параметры mass, stiffness, damping под конкретный UX. Это даёт ощущение физической карточки. Мы гарантируем, что после настройки анимация будет работать при 60 fps на устройствах от iPhone 8 и Android 8.

Сравнение подходов по сложности

Процесс работы

1. Аналитика — определяем UX-сценарии, target velocity (обычно 500-1500 dp/s), угол поворота (15-25°), поведение стека.
2. Проектирование — создаём прототип анимации в Figma или After Effects.
3. Реализация — пишем код с использованием платформенных API (UISpringTimingParameters, Compose animation).
4. Тестирование — проверяем на реальных устройствах, замеряем fps (цель — 60 fps), корректируем параметры.
5. Деплой — выкатываем в TestFlight / Google Play Internal Testing.

Сроки ориентировочно

• Базовая анимация (свайп + rotation) — от 1 дня.
• С поддержкой undo, оверлеями и сложным стеком — до 3 дней.
• Стоимость рассчитывается индивидуально — напишите нам для оценки бюджета.

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

• Исходный код с комментариями (iOS/Android/Flutter).
• Интеграция существующего API (если требуется).
• Документация по настройке параметров.
• Поддержка в течение 2 недель после деплоя.

Экономия времени на анимации — до 3 дней разработки с нуля. Стоимость разработки рассчитывается индивидуально. Получите консультацию инженера с более чем 5-летним опытом в мобильной разработке. Закажите разработку анимации свайпа, и мы настроим физику под ваш UX.