Ми регулярно стикаємося з ситуацією: у клієнта є 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 (JSON) | 5–50 КБ | Так | Векторна (без втрат) |
| GIF | 500 КБ – 5 МБ | Так | Растрова (пікселізація) |
| MP4 | 50–500 КБ | Ні | Растрова (фікс.розширення) |
Lottie перевершує GIF за розміром у 10–100 разів, а за якістю — не має пікселізації на будь-якому екрані.
Як правильно підготувати ілюстрацію для Lottie?
- Кожен анімований елемент — окремий іменований шар в Adobe Illustrator. Ієрархія шарів критична:
background,character,character/head,character/hands,foreground. - Усі шрифти конвертуються в криві (Create Outlines).
- Тіні створюються через окремі Shape Layers, а не через Drop Shadow.
- Градієнти — тільки 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
| Помилка | Причина | Рішення |
|---|---|---|
| Елемент зникає в Lottie | Track Matte з Luma | Замінити на Alpha Matte |
| Gradient неправильного кольору | Linear RGB vs sRGB | Увімкнути Color Management в AE |
| Величезний JSON (100+ КБ) | Растрові шари або зайві keyframes | Оптимізувати через LottieFiles, перевести у вектор |
| Анімація смикається на Android | Pingpong loop або неправильний easing | Використовувати лінійний цикл, налаштовувати Graph Editor |
| Шрифти не відображаються | Не конвертовані в криві | Create Outlines перед імпортом |
Кількість шарів (зазвичай 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 — зв'яжіться з нами. Ми оцінимо ваш проект, запропонуємо оптимальний стек і терміни. Отримайте консультацію вже сьогодні.