Мы регулярно сталкиваемся с ситуацией: у клиента есть 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 — свяжитесь с нами. Мы оценим ваш проект, предложим оптимальный стек и сроки. Получите консультацию уже сегодня.