Анимации в мобильных приложениях: 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:) из iOS 17.
Как 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.
Lottie vs 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 — стандарт для размеченной векторной анимации, Rive — более гибкий инструмент с физикой и state machine.
Spring-физика и Hero transitions: как добиться естественности
Spring-анимация ощущается естественно потому что имитирует физику — массу, жёсткость и демпфирование. В SwiftUI: Animation.spring(response:dampingFraction:). В Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).
Для Hero-переходов (элемент «перелетает» между экранами) на iOS используем UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. В SwiftUI с iOS 17 — matchedTransitionSource + navigationTransition(.zoom). На Flutter — Hero виджет, который работает из коробки.
Как избежать типичных ошибок в Hero transitions?
Анимация начинается нормально, но на целевом экране элемент «прыгает» в финальную позицию. Причина — AutoLayout constraints применяются до завершения анимации. Решение: layoutIfNeeded() в блоке анимации или использование transform вместо frame-изменений.
Что входит в работу: анимационный слой под ключ
- Интеграция Lottie/Rive-файлов в дизайн-систему
- Код gesture-driven переходов (bottom sheets, drawers, карусели)
- Тестирование на реальных устройствах (iOS 15–17, Android 10–14)
- Документация по анимациям (архитектура, ключи состояний)
- Поддержка при обновлении дизайна (гарантия 30 дней)
У нас 5+ лет опыта в мобильной разработке, более 30 проектов с анимациями, сертифицированные iOS/Android разработчики.
Сроки выполнения
- Базовые экранные переходы и микроинтеракции — 1 неделя.
- Lottie/Rive интеграция с дизайн-системой — 3-5 дней после получения финальных файлов.
- Кастомная gesture-driven интерактивность (sheet, drawer, карусель с физикой) — 1-2 недели.
Напишите нам — добавим анимации под ключ за 2 недели. Первая консультация бесплатно.