Мы, команда мобильных разработчиков с 5-летним опытом, знаем, как падает FPS до 18 на mid-range устройствах из-за неправильного пайплайна анимаций. Художник рисует 60-кадровый спрайт-лист, аниматор экспортирует атлас 2048×2048 — и на Snapdragon 680 батарея греется, а игра тормозит. Проблема не в анимации, а в том, как она попадает в движок и воспроизводится на GPU. Мы предлагаем пайплайн анимаций под ключ, который решает эти проблемы. Оценим ваш проект за 1–2 дня, свяжитесь с нами.
Где ломается пайплайн анимации в мобильных играх
Самая частая ошибка — попытка использовать покадровую анимацию там, где нужна скелетная, и наоборот. Frame-by-frame в Unity через Sprite Renderer и Animation Clip — это постоянная смена текстуры на каждом кадре. На Snapdragon 680 с общей памятью CPU/GPU каждый swap текстуры стоит дорого. При 15 персонажах с 60-кадровыми анимациями GPU memory bandwidth уходит в потолок. Сравнение: Spine 2D позволяет снизить нагрузку на GPU на 30% по сравнению с кадровой анимацией.
Скелетная анимация через Spine 2D или DragonBones — противоположная проблема: разработчики тащат полный runtime весом ~500 КБ для простого персонажа с пятью костями. Для таких случаев лучше встроенный Unity 2D Animation с поддержкой IK через 2D IK — до восьми костей работает без заметных оверхедов.
Проблема со спрайт-атласами — несоответствие степеней двойки. Атлас 900×700 вместо 1024×512 не сжимается нормально, текстура занимает вдвое больше. На Android это критично: при 20 персонажах в сцене OutOfMemoryError приходит неожиданно.
Почему важен правильный формат атласа?
Формат текстуры напрямую влияет на производительность. ASTC 6×6 даёт лучшее сжатие для iOS, ETC2 — стандарт для Android. На старых устройствах (API 19–21) ASTC не поддерживается — используем ETC2 с fallback на ETC1 для RGB без альфа. Собираем атласы через Unity's Sprite Atlas с Allow Rotation и Tight Packing.
Какой инструмент выбрать для скелетной анимации?
Для персонажей с более чем 8 костями и attachment swapping используем Spine 2D с SkeletonAnimation и AnimationState. Для простых NPC или UI — Unity 2D Animation с PSD Importer, где художник работает в Photoshop с rigged слоями. Это снижает затраты на интеграцию и не требует покупки лицензии Spine.
Как строим пайплайн анимаций
Начинаем с инвентаризации: количество персонажей, одновременных на экране, целевой FPS (30 или 60), минимальные версии OS. На основе этого выбираем подход.
Этапы работы:
- Техническое задание — список состояний каждого персонажа (idle, run, attack, death, hit), требования к blending, формат исходников.
- Риггинг и экспорт из Spine или настройка 2D Animation в Unity.
- Импорт и сборка спрайт-атласов.
- Настройка AnimatorController или AnimationState machine.
- Интеграция с игровой логикой.
- Профилирование на реальных устройствах: Samsung Galaxy A32 (mid-range), iPhone SE 2nd gen (low-end).
- Оптимизация по результатам.
Для эффектов переходов используем DOTween Pro с Sequence. Например, анимация смерти: fade out (DOFade), scale down (DOScale) с Ease.InBack, одновременный spawn particle effect. Всё в одном Sequence, без корутин.
Пресеты качества
| Пресет |
FPS |
Атласы |
Частицы |
Деформация меша |
| High |
60 |
Полные |
Все |
Да |
| Medium |
30 |
×0.5 |
Упрощённые |
Да |
| Low |
30 |
Минимальные |
Нет |
Нет |
Переключение через QualitySettings.SetQualityLevel по бенчмарку GPU.
Инструменты и форматы
| Задача |
Инструмент |
Формат вывода |
| Скелетная анимация |
Spine 2D |
.skel + .atlas |
| Простой риггинг |
Unity 2D Animation |
Встроенный |
| Эффекты частиц |
Unity VFX Graph / Particle System |
.prefab |
| Покадровая анимация |
Aseprite → Texture Packer |
Sprite Atlas PNG |
| Анимация UI |
DOTween Pro |
Code-driven |
| Профилирование |
Unity Profiler + GPU Usage |
— |
Что входит в работу
- Техническое задание на анимации.
- Риггинг и экспорт анимаций (Spine или Unity 2D Animation).
- Оптимизированные спрайт-атласы (ASTC/ETC2).
- AnimatorController или state machine.
- Интеграция с игровой логикой.
- Профилирование на устройствах и оптимизация.
- Обучение команды (по запросу).
- Поддержка в течение месяца после сдачи.
За 5 лет мы реализовали 20+ проектов с анимациями для мобильных игр, включая жанры action и RPG. Получите консультацию по анимационному пайплайну — свяжитесь с нами. Стоимость рассчитывается индивидуально после анализа требований.
Анимации в мобильных приложениях: 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 недели. Первая консультация бесплатно.
