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