Ми, команда мобільних розробників з 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% порівняно з кадровою анімацією. Ми гарантуємо, що після оптимізації FPS не просідає нижче цільового на пристроях з узгодженого списку.
Скелетна анімація через 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. Гарантуємо стабільний FPS на пристроях з узгодженого списку. Отримайте консультацію по анімаційному пайплайну — зв'яжіться з нами. Вартість починається від 500 $ для простих проектів і до 15 000 $ для складних. Розраховується індивідуально після аналізу вимог.
Анімації в мобільних додатках: 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 використовується як базова специфікація.
