Разработка анімацій жестів (своїп, пінч, долге натискання)
Жестові анімації—це не декорація поверх обробника жесту. Це сам інтерфейс. Коли користувач тягне карточку для видалення, візуальна зворотний зв'язок повинна випереджати палець, а не йти за ним з затримкою.
Своїп: інтерактивність та завершення
iOS: UIPanGestureRecognizer + пружинне завершення
Типовий кейс—своїп карточки з 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). Саме так працює bounce в UIScrollView. Реалізуємо самі при кастомних жестах:
func rubberBand(value: CGFloat, limit: CGFloat, coefficient: CGFloat = 0.55) -> CGFloat {
let bandedValue = abs(value) - limit
guard bandedValue > 0 else { return value }
let sign: CGFloat = value > 0 ? 1 : -1
return sign * (limit + bandedValue * coefficient / (1 + bandedValue * 0.004))
}
Пінч: масштабування без артефактів
UIPinchGestureRecognizer та 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 {
// Clamp + spring return якщо вийшли за пределы
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.
Комбінування пінча та панорамування
UIGestureRecognizer за умовчанням не працюють одночасно. Реалізуємо gestureRecognizer(_:shouldRecognizeSimultaneouslyWith:) в делегаті:
func gestureRecognizer(_ a: UIGestureRecognizer,
shouldRecognizeSimultaneouslyWith b: UIGestureRecognizer) -> Bool {
return (a is UIPinchGestureRecognizer || a is UIPanGestureRecognizer)
&& (b is UIPinchGestureRecognizer || b is UIPanGestureRecognizer)
}
Долге натискання: haptic + visual lock
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 додатків. Вона дає користувачу візуальне підтвердження, що жест «захоплений».
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:
LaunchedEffect(isDragging) {
if (!isDragging) {
animatableOffset.animateTo(
targetValue = Offset.Zero,
animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy)
)
}
}
Ориентиры по терминам
Реалізація жестової анімації одного типу (своїп або пінч) з spring-поверненням—1–2 дні. Повний набір—своїп + пінч + long press з хаптиками, на обох платформах—3–5 днів.