Створення Lottie-анімацій для екранів мобільного додатку

Ми регулярно стикаємося з ситуацією: у клієнта є Figma-макет онбордингу з плавними рухами, але при спробі реалізувати анімацію через звичайний GIF розмір файлу злітає до мегабайт, а якість страждає на Retina-екранах. Рішення — Lottie-анімація на основі векторного JSON. Однак між статичною ілюстрацією та робочим .json-файлом, який однаково виглядає на iPhone SE та Samsung A03, лежить нетривіальна робота. Ми гарантуємо, що кожна анімація пройде оптимізацію та буде протестована на реальних пристроях. При правильному підході Lottie-анімація завантажується в 5 разів швидше, ніж APNG, та економить до 40% бюджету на розробку порівняно з відеороликами.

Lottie — формат векторної анімації від Airbnb, який стискає анімацію в JSON-файл розміром 5–50 КБ, у 10–100 разів менше еквівалентного GIF. Як сказано в офіційній документації, Lottie дозволяє відтворювати складні анімації з прозорістю та програмним керуванням. Він підтримує прозорість, програмне керування кольором та швидкістю, а також масштабується без втрат. Однак створення якісної Lottie-анімації потребує врахування безлічі технічних деталей.

Чому Lottie кращий за растрові формати?

Стандартні растрові формати (GIF, APNG, відеоролики) мають жорсткі обмеження: велика вага, пікселізація на екранах з високою щільністю пікселів, відсутність прозорості та складність інтеграції з анімаціями інтерфейсу. Lottie вирішує ці проблеми масштабованістю та малою вагою. Типовий .json файл займає 5–50 КБ проти 1–5 МБ для еквівалентної GIF-анімації. Векторна графіка масштабується без втрат, а кольори, швидкість та зациклювання можна змінювати прямо в коді додатку. Прозорість ідеальна для накладання на UI-елементи.

Lottie перевершує GIF за розміром у 10–100 разів, а за якістю — не має пікселізації на будь-якому екрані.

Як правильно підготувати ілюстрацію для Lottie?

1. Кожен анімований елемент — окремий іменований шар в Adobe Illustrator. Ієрархія шарів критична: background, character, character/head, character/hands, foreground.
2. Усі шрифти конвертуються в криві (Create Outlines).
3. Тіні створюються через окремі Shape Layers, а не через Drop Shadow.
4. Градієнти — тільки Linear або Radial.

Імпортуємо AI-файл в After Effects з опцією Create Composition та Retain Layer Sizes. Ключові принципи анімації:

• Timing: тривалість анімації онбордингу — 1,5–2,5 секунди.
• Stagger: елементи з'являються із затримкою 0,1–0,15 с.
• Easing: використовуємо Graph Editor для кривих — Ease In на старті, Ease Out в кінці.
• Loop: для повторюваних анімацій (завантаження, idle) перший та останній кадр збігаються.

Приклад із практики: складний онбординг із 5 екранів

Одного разу клієнт попросив анімувати онбординг, де кожен екран містив рухомі елементи, пов'язані спільним сценарієм. Після експорту через Bodymovin JSON-файл важив 120 КБ — забагато для швидкого завантаження на повільних з'єднаннях. Ми провели ручну оптимізацію: перевели всі растрові шари у вектор, видалили зайві keyframes за допомогою Graph Editor, замінили складні маски на прості Shape Layers. У результаті розмір упав до 25 КБ, а анімація залишилася плавною на Android 6 та iOS 12. Цей кейс показав, що ретельна оптимізація після експорту обов'язкова.

Як оптимізувати JSON після експорту?

Після експорту через Bodymovin проженіть JSON через LottieFiles Optimizer (ми використовуємо її в CLI). Він видаляє надлишкові keyframes та округлює числа. Вручну перевірте refId assets: якщо є base64-зображення, замініть зовнішніми файлами або перемалюйте в Illustrator. Це типовий крок, який займає 15–20 хвилин та зменшує розмір ще на 30-40%.

Чому важливо тестувати анімацію на реальних пристроях?

На етапі тестування найчастіше виявляються проблеми, які не видно в After Effects:

• Відмінності в рендерингу: градієнти можуть відображатися з іншим відтінком (через колірний профіль AE: Linear RGB vs sRGB). Виправляється налаштуваннями Color Management в проєкті AE.
• Маски та трек матти: Luma Matte не підтримується — тільки Alpha Matte. Pre-compose з Track Matte часто ламається.
• Продуктивність: складні маски з фігурами можуть викликати лаги на старих пристроях. Оптимізуємо кількість точок шляху.

Типові помилки при створенні Lottie

Кількість шарів (зазвичай 5–15 на онбординг), ключових кадрів та ефектів визначає складність. Для оцінки надішліть Figma-макет.

Що входить в роботу

Відзначимо: коли ви замовляєте Lottie-анімацію під ключ, ми надаємо:

• Анімований JSON-файл, оптимізований для iOS та Android.
• Вихідний проєкт After Effects (з можливістю правок).
• Інтеграційний код для вбудовування (Swift, Kotlin, Flutter, React Native).
• Інструкцію з налаштування швидкості та циклів.
• Тестування на пристроях замовника (до 5 девайсів).
• Безкоштовну правку протягом місяця.

Терміни та інвестиції

Терміни та бюджет залежать від складності. Для швидкої оцінки:

• Проста анімація одного екрана (ілюстрація готова) — від 1 до 2 днів.
• Комплексний онбординг із 3–5 екранів із взаємопов'язаними елементами — від 3 до 5 днів.
• Кастомна анімація з нуля (створення ілюстрації + анімація) — від 5 до 7 днів.

Вартість розраховується індивідуально після аналізу макету. В будь-якому випадку ви отримуєте гарантію якості: якщо анімація не проходить тестування на вашому пристрої, ми доопрацьовуємо її за свій рахунок.

Замовте створення Lottie-анімації

Якщо ви хочете впровадити якісну анімацію в мобільний додаток і не витрачати час на вивчення тонкощів After Effects та Bodymovin — зв'яжіться з нами. Ми оцінимо ваш проект, запропонуємо оптимальний стек і терміни. Отримайте консультацію вже сьогодні.