Анімації в мобільних додатках: 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 для вашого проєкту?
Обидва інструменти вирішують задачу «дизайнер робить анімацію, розробник додає файл». Але принципово по-різному.
| Критерій | Lottie | Rive |
|---|---|---|
| Формат | JSON векторна анімація | Бінарний .riv |
| Інтерактивність | Ні (лінійне відтворення) | State Machine, реакції на ввід |
| Продуктивність | Середня (blur/частинки важкі) | Апаратний рендеринг Metal/OpenGL |
| Розмір файлу | 2-5 МБ | 200-500 КБ |
| Підтримка платформ | iOS, Android, Web, Flutter, RN | iOS, Android, Web, Flutter, RN |
Вибір простий: статична декоративна анімація (splash screen, onboarding ілюстрації) — Lottie. Інтерактивні UI-елементи зі станами — Rive. Наприклад, кнопка з hover, pressed, loading, success — одна Rive-анімація з чотирма станами проти чотирьох окремих Lottie-файлів. Це зменшує обсяг коду та спрощує підтримку.
Як впровадити анімації Lottie за 4 кроки?
-
Експорт з After Effects через плагін Bodymovin — отримуєте
.json. - Додавання файлу до ресурсів проєкту (assets або drawable).
-
Ініціалізація плеєра — в iOS використовуйте
LOTAnimationView, в Android —LottieAnimationView. -
Запуск з параметрами —
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.
Таблиця: Строки виконання та типові сценарії
| Задача | Час | Коментар |
|---|---|---|
| Базові екранні переходи та мікроінтеракції | 1 тиждень | Стандартні gesture-driven sheets, каруселі |
| Lottie/Rive інтеграція з дизайн-системою | 3-5 днів | Після отримання фінальних файлів |
| Кастомна інтерактивність з фізикою (сustom sheet, drawer) | 1-2 тижні | Включає тестування на 4+ пристроях |
Що входить в роботу: анімаційний шар під ключ
- Інтеграція Lottie/Rive-файлів в дизайн-систему
- Код gesture-driven переходів (bottom sheets, drawers, каруселі)
- Тестування на реальних пристроях (iOS, Android)
- Документація з анімацій (архітектура, ключі станів)
- Підтримка при оновленні дизайну (гарантія 30 днів)
У нас 5+ років досвіду в мобільній розробці, понад 30 проєктів з анімаціями, сертифіковані iOS/Android розробники. Замовте анімації під ключ — перша консультація безкоштовна. Напишіть нам у месенджер, щоб узгодити деталі.
Apple Developer Documentation – UIKit Animations використовується як базова специфікація.