Жестові анімації в мобільному додатку: реалізація та калібрування

Реалізація жестових анімацій (Interactive Gesture Animations) у мобільному додатку

Ми створюємо жестові анімації, які не гальмують і не виглядають дешево. Наш досвід — понад 5 років у мобільній розробці, більше 20 проєктів з кастомними анімаціями. Різниця між жестовою анімацією та звичайною в тому, що вона переривана. Користувач тягне картку, передумує на середині, і вона має повернутися назад з фізично достовірною поведінкою — не просто стрибнути у вихідне положення, а «відпружинити» з урахуванням накопиченої швидкості. Це і є інтерактивна жестова анімація — анімація, керована пальцем у реальному часі.

Чому синхронізація швидкості — головний виклик?

Ключовий параметр будь-якої жестової анімації — зв'язок між швидкістю жесту в момент відпускання (gestureRecognizer.velocity) і параметрами анімації завершення. Якщо їх не синхронізувати, виходить «стрибок»: палець рухається з однією швидкістю, а об'єкт закінчує рух з іншою.

На iOS UIViewPropertyAnimator вирішує це нативно через continueAnimation(withTimingParameters:durationFactor:):

@objc func handlePan(_ gesture: UIPanGestureRecognizer) {
    let translation = gesture.translation(in: view)
    switch gesture.state {
    case .changed:
        animator?.fractionComplete = translation.y / totalDistance
    case .ended:
        let velocity = gesture.velocity(in: view)
        let springVelocity = abs(velocity.y) / (totalDistance - translation.y)
        let timing = UISpringTimingParameters(dampingRatio: 0.8,
                                              initialVelocity: CGVector(dx: 0, dy: springVelocity))
        animator?.continueAnimation(withTimingParameters: timing, durationFactor: 0)
    default: break
    }
}

fractionComplete — це пряме керування прогресом анімації жестом. Значення 0.0 — початок, 1.0 — кінець. Користувач буквально «тягне» анімацію за собою. Для глибокого розуміння рекомендую офіційну документацію UIKit.

Як реалізувати свайп для відхилення картки?

Класичний патерн у стилі Tinder або списків завдань: картка слідує за пальцем, при досягненні порогу — відлітає, при недостатньому зміщенні — повертається.

Три параметри, які потрібно відкалібрувати:

• Поріг відпускання — зазвичай 30-40% ширини екрану або швидкість > 800 pt/s
• Кут обертання — transform = CGAffineTransform(rotationAngle: translation.x / screenWidth * 0.3) — створює відчуття фізики
• Швидкість анімації відльоту — має відповідати швидкості жесту, інакше картка «гальмує» в повітрі

На Android реалізуємо через ViewDragHelper або ItemTouchHelper (для RecyclerView). ItemTouchHelper хороший для списків, але обмежений: кастомний feedback малюнок вимагає перевизначення onChildDraw. У Flutter — Dismissible для простих випадків, GestureDetector + AnimationController з fling() для складних. fling() приймає velocity безпосередньо з DragEndDetails.velocity.pixelsPerSecond — це саме та синхронізація, про яку говоримо.

Порівняння підходів на різних платформах

Час відгуку: жестові vs звичайні анімації

Pull-to-refresh з кастомною анімацією

Стандартний UIRefreshControl і SwipeRefreshLayout не підтримують кастомну анімацію індикатора. Реалізуємо через ScrollView з від'ємним offset: коли contentOffset.y < -threshold, вмикаємо кастомний індикатор з параметром прогресу = abs(offset.y) / threshold. Lottie-анімація, прив'язана до setProgress(), дає довільний дизайн. Для Lottie-анімацій використовуємо LottieAnimationView.setProgress() на iOS та LottieDrawable.setProgress() на Android, що дозволяє точно прив'язати прогрес анімації до зміщення.

Drag & Drop з фізичною поведінкою

На iOS — UIDragInteraction + UIDropInteraction для cross-app DnD, UILongPressGestureRecognizer + UIViewPropertyAnimator для внутрішньоекранного. Важливо: при піднятті елемента додаємо scale-анімацію (1.05) і тінь — візуальний сигнал «я тримаю об'єкт». При поверненні — UISpringTimingParameters з високим dampingRatio (0.9) для ефекту «м'якої посадки».

Тестування та калібрування

1. Налаштуйте Slow Animations в симуляторі для візуального налагодження.
2. Запустіть Xcode Instruments — Animation Hitches на фізичному пристрої, досягніть GPU frame time не більше 16ms (60fps).
3. Перевірте всі стани: утримання, швидкий свайп, повторний дотик під час анімації.
4. Переконайтеся, що параметри анімації (damping, stiffness) узгоджені з дизайном.

Жестові анімації обов'язково тестуємо на фізичному пристрої — емулятор не відтворює точну сенсорну фізику. Slow Animations в симуляторі допомагає виявити артефакти, але реальне відчуття — тільки на залізі. На Android використовуйте ViewPropertyAnimator та перевіряйте gpu frame time через Profile GPU Rendering. У релізній збірці переконайтеся, що ProGuard не вирізав класи Lottie: додайте -keep class com.airbnb.lottie.** { *; }.

Процес оцінки та роботи

1. Збір даних — аналіз вимог та наявного дизайну.
2. Аудит — оцінка складності та сумісності з платформою.
3. Проектування — вибір підходу (UIKit, ViewDragHelper, Flutter).
4. Оцінка — визначення термінів та орієнтовної вартості.
5. Розробка — створення прототипу з калібруванням параметрів.
6. Тестування — на 5+ фізичних пристроях, перевірка 60fps.
7. Запуск — передача коду з коментарями, підтримка 2 тижні.

Орієнтири за термінами

Реалізація одного патерну жестової анімації займає від 2 до 3 днів, включаючи інтеграцію та калібрування під конкретний дизайн. Для складніших рішень (Lottie, Rive) термін може збільшитися до 5 днів.

Що входить у роботу

• Розробка прототипу анімації з калібруванням параметрів
• Інтеграція з вашим дизайном (Lottie, Rive або Core Animation)
• Тестування на 5+ фізичних пристроях
• Передача вихідного коду з коментарями
• Підтримка протягом 2 тижнів після релізу

Отримайте консультацію щодо вашого проєкту — зв'яжіться з нами для оцінки.

Анімації в мобільних додатках: Lottie, Rive, Spring та Reanimated

Ми зробили анімації для десятків проєктів — від ігрових інтерфейсів до bank-grade додатків. Знаємо, як змусити 120 fps працювати навіть на Android з ProGuard. Якщо анімація смикається — проблема не в інструменті, а у виборі підходу. Нижче покажемо, як обирати між Lottie та Rive, чому Spring physics перемагає UIView.animate, і як Reanimated 3 вичавлює 60 fps на старих пристроях. Отримайте консультацію щодо вашого проєкту — оцінимо анімаційний шар безкоштовно.

Чому UIView.animate ламається на складних сценаріях

UIView.animate(withDuration:) та ObjectAnimator на Android — правильний вибір для простих переходів. Але щойно анімація стає інтерактивною (користувач тягне елемент, швидкість залежить від жесту), потрібен інший підхід.

На iOS для gesture-driven анімації правильний інструмент — UIViewPropertyAnimator. Він дозволяє призупиняти, обертати та модифікувати анімацію в процесі. Типовий кейс: bottom sheet, який слідує за пальцем, продовжує рух з інерцією після відпускання та притягується до найближчої позиції. З UIView.animate це або не працює зовсім, або потребує ручної фізики.

У SwiftUI withAnimation працює з коробки, але інтерактивність обмежена — немає прямого аналога UIViewPropertyAnimator. Обхідний шлях: .gesture(DragGesture()) + @GestureState + явне обчислення позиції. Або йдемо в SwiftUI Animations API з Animation.spring(duration:bounce:).

Як React Native Reanimated обходить JS-міст

React Native Animated API виконує анімації в JS thread — це джерело джанка при завантаженому bridge. Reanimated 3 вирішує проблему через worklets: функції, які компілюються та виконуються прямо на UI thread без перетину JS-моста.

Приклад: parallax scroll header. На базовому Animated.Value при швидкому скролі FPS падає до 40-45 на mid-range Android. На Reanimated з useAnimatedScrollHandler — стабільні 60 fps, тому що весь перерахунок позиції відбувається на UI thread.

Reanimated 3 з useSharedValue, useAnimatedStyle та withSpring/withTiming — стандарт для анімацій у React Native. Gesture Handler v2 щільно інтегрований: useAnimatedGestureHandler замінює PanResponder і теж працює на UI thread.

Чому Lottie може знижувати FPS на Android і як це виправити

Lottie експортує After Effects анімацію в JSON. На iOS з lottie-ios працює стабільно, але на Android при складних ефектах (blur, частинки, градієнти) векторний рендеринг через Canvas призводить до просадок до 30-40 fps. Рішення — або спрощувати анімацію, або використовувати Rive з апаратним рендерингом. Ми тестували: Lottie-файл з розмиттям 5 МБ на Xiaomi Redmi Note 10 дає 48 fps, аналогічна анімація в Rive (.riv 400 КБ) — 60 fps. Rive працює в 1.25 раза швидше на однаковому пристрої, а при складних ефектах — до 4 разів легше за розміром.

Як вибрати між Lottie та Rive для вашого проєкту?

Обидва інструменти вирішують задачу «дизайнер робить анімацію, розробник додає файл». Але принципово по-різному.

Вибір простий: статична декоративна анімація (splash screen, onboarding ілюстрації) — Lottie. Інтерактивні UI-елементи зі станами — Rive. Наприклад, кнопка з hover, pressed, loading, success — одна Rive-анімація з чотирма станами проти чотирьох окремих Lottie-файлів. Це зменшує обсяг коду та спрощує підтримку.

Як впровадити анімації Lottie за 4 кроки?

1. Експорт з After Effects через плагін Bodymovin — отримуєте .json.
2. Додавання файлу до ресурсів проєкту (assets або drawable).
3. Ініціалізація плеєра — в iOS використовуйте LOTAnimationView, в Android — LottieAnimationView.
4. Запуск з параметрами — loopMode, animationSpeed, contentMode. Для складних сценаріїв — кастомний AnimationListener.

На практиці цей підхід працює, але потребує контролю версій Lottie-файлів. Ми рекомендуємо версіонувати їх разом з кодом і тестувати на цільових пристроях.

Spring-фізика та Hero transitions: як досягти природності

Spring-анімація відчувається природньо тому що імітує фізику — масу, жорсткість і демпфування. У SwiftUI: Animation.spring(response:dampingFraction:). В Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

Для Hero-переходів (елемент «перелітає» між екранами) на iOS використовуємо UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. У SwiftUI — matchedTransitionSource + navigationTransition(.zoom). На Flutter — Hero віджет, який працює з коробки.

Як уникнути типових помилок у Hero transitions?

Анімація починається нормально, але на цільовому екрані елемент «стрибає» в фінальну позицію. Причина — AutoLayout constraints застосовуються до завершення анімації. Рішення: layoutIfNeeded() в блоці анімації або використання transform замість frame-змін. На Flutter — перевіряйте HeroFlightShuttleConfiguration. Також слідкуйте за VSync: на Android при 90 Гц дисплеї Hero-перехід може виглядати смиканим, якщо не виставлений Choreographer.

Таблиця: Строки виконання та типові сценарії

Що входить в роботу: анімаційний шар під ключ

• Інтеграція Lottie/Rive-файлів в дизайн-систему
• Код gesture-driven переходів (bottom sheets, drawers, каруселі)
• Тестування на реальних пристроях (iOS, Android)
• Документація з анімацій (архітектура, ключі станів)
• Підтримка при оновленні дизайну (гарантія 30 днів)

У нас 5+ років досвіду в мобільній розробці, понад 30 проєктів з анімаціями, сертифіковані iOS/Android розробники. Замовте анімації під ключ — перша консультація безкоштовна. Напишіть нам у месенджер, щоб узгодити деталі.

Apple Developer Documentation – UIKit Animations використовується як базова специфікація.