Анимации в мобильных приложениях: Lottie, Rive, Spring и Reanimated
Анимация либо работает в 60/120 fps и ощущается естественно, либо видна в Xcode Instruments как красные полосы на главном потоке. Промежуточного варианта нет.
Почему 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: worklets на UI thread
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 vs Rive
Оба инструмента решают задачу «дизайнер делает анимацию, разработчик добавляет файл». Но принципиально по-разному.
Lottie экспортирует After Effects анимацию в JSON. Рендеринг — векторный, поддерживает iOS (lottie-ios), Android (lottie-android), Flutter (lottie), React Native (lottie-react-native). Ограничения: нет интерактивности (анимация линейная), большие JSON-файлы с частицами и blur-эффектами рендерятся тяжело. Blur через Lottie на Android — гарантированный FPS drop.
Rive — state machine. Анимация имеет состояния и переходы между ними, управляемые из кода через StateMachineInput. Кнопка с hover, pressed, loading, success состояниями — это одна Rive-анимация с четырьмя состояниями, а не четыре отдельных файла. Рендеринг аппаратный через Metal/OpenGL. Размер файлов меньше Lottie за счёт бинарного формата .riv.
Выбор прост: статичная декоративная анимация (splash screen, onboarding иллюстрации) — Lottie. Интерактивные UI-элементы с состояниями — Rive.
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-изменений.
Сроки на анимационный слой: базовые экранные переходы и микроинтеракции — 1 неделя. Lottie/Rive интеграция с дизайн-системой — 3-5 дней после получения финальных файлов. Кастомная gesture-driven интерактивность (sheet, drawer, карусель с физикой) — 1-2 недели.