Створення Lottie-анімацій для екранів мобільного додатка
Дизайнер показує гарну адаптацію у Figma зі плавно рухаються ілюстраціями. Одне питання: як це буде зроблено? «Анімація через Lottie» звучить просто. Насправді, між статичною ілюстрацією у Figma та рабочим файлом .json, що однаково виглядає на iPhone SE та Samsung A03, лежить нетривіальна робота.
Що вирішити до початку After Effects
Lottie рендерить векторну графіку через експортер Bodymovin. Це означає: растрові текстури, ефекти Photoshop, layer styles (outer glow, drop shadow через layer style) — або не експортуються, або конвертуються в растр і раздувають .json до мегабайт.
До початку анімації погодьте зі дизайнером список обмежень:
- Тільки векторні шари (Shape Layers, а не растр)
- Тіні—через окремий Shape Layer з opacity, а не через ефект
Drop Shadow - Градієнти—Linear або Radial, без Angle/Diamond градієнтів (Bodymovin не підтримує належно)
- Шрифти—конвертуйте в криві через
Create Outlinesв Illustrator перед імпортом у AE - Merge Paths—використовуйте обережно; на Android API <26 вимагає програмного рендерингу
Процес створення
Почніть в Adobe Illustrator: підготуйте або адаптуйте ілюстрацію. Кожен анімований елемент — окремий названий шар. Групуйте шари логічно: background, character, character/head, character/hands, foreground. Ієрархія важлива—вона стане ієрархією анімованих об'єктів у After Effects.
Імпортуйте в After Effects через File → Import → Adobe Illustrator. Увімкніть Create Composition з опцією Retain Layer Sizes. Кожен Illustrator-шар стає окремим AE-шаром зі збереженими розмірами та позиціями.
Анімуйте через keyframes. Для мобільного UI ключові принципи:
Timing: основна анімація екрана адаптації — 1,5–2,5 секунди. Довше—користувачі чекають. Використовуйте Graph Editor для налаштування easing: Ease In при вході (повільний старт, прискорюється), Ease Out при виході (уповільнення до кінця). Для ілюстрацій це плавніше, ніж лінійна інтерполяція.
Stagger: елементи з'являються не одночасно, а з offset 0,1–0,15 секунди. Фон → основний елемент → деталі → текст. Створює глибину без 3D.
Loop: якщо анімація циклюється (завантаження, стан idle), переконайтеся, що перший та останній кадри збігаються або перехід непомітний. Для Lottie уникайте циклу pingpong—він працює в runtime, але поведінка трохи відрізняється на iOS та Android.
Після анімації встановіть плагін Bodymovin (безплатно, GitHub: airbnb/lottie-web). Експортуйте через File → Scripts → Bodymovin. У параметрах: відключіть Glyphs (якщо шрифти конвертовані), увімкніть Assets → Embed тільки якщо є зовнішні растрові зображення та ви готові до збільшення розміру.
Оптимізація після експорту
Сировий файл .json з After Effects часто містить надлишкові дані: непотрібні keyframes на незмінних властивостях, закруглені числа з 6+ знаками після коми.
Запустіть через LottieFiles Optimizer—видаляє до 50% розміру. Крім того, вручну перевіряйте json на наявність refId assets: якщо там base64-рядки з зображеннями, замініть на зовнішні файли або растеризуйте в Illustrator іншим способом.
Тестуйте через LottieFiles preview (web) та офіційну програму на реальних пристроях. Реальні пристрої важливі: емулятор не показує FPS drop на складних масках.
Поширені помилки при створенні
Анімація в AE виглядає ідеально, але у Lottie-preview деякі елементи зникають або змінюють позицію. Причина: шари Track Matte або Pre-compose з неправильними параметрами. Luma Matte не підтримується Bodymovin—тільки Alpha Matte.
Gradient fill працює, але колір в runtime неправильний. Часто AE створює gradient з Colorspace: Linear RGB, а Lottie інтерпретує як sRGB. Виправляється в параметрах Color Management проекту AE.
Час розробки
Анімація одного екрана адаптації (ілюстрація готова) займає 1–2 дні, включаючи оптимізацію та тестування. Повна адаптація з 3–5 екранів із взаємопов'язаними елементами займає 3–5 днів. Вартість розраховується індивідуально після оцінки складності ілюстрацій і кількості анімованих станів.