Вы потратили недели на создание плавной анимации онбординга в After Effects, но после экспорта через Bodymovin JSON весит 3 МБ, а на старых Android-устройствах анимация тормозит? Мы специализируемся на экспорте AE-анимаций в Lottie: проводим аудит, оптимизацию и интеграцию на iOS, Android и Flutter. Типичный сценарий: expression для bounce не экспортируется, а маски с Luminance matte превращаются в пустые прямоугольники. Наша методика за 5 шагов превращает сырой AE-проект в готовый к интеграции JSON размером до 200 КБ — это в 4 раза быстрее загрузки видео той же сцены. За 5 лет мы обработали более 50 проектов, от микроанимаций до комплексных онбордингов на 10 экранов.
Типичные проблемы при экспорте AE в Lottie
Большинство ошибок возникают из-за неподдерживаемых функций After Effects. Самые частые:
- Expressions — Lottie поддерживает только wiggle; остальные expression нужно конвертировать в keyframes, иначе анимация не воспроизводится.
- 3D-слои — Lottie работает только в 2D, все трёхмерные трансформации игнорируются.
- Blend modes — на Android некоторые режимы наложения отображаются некорректно (например, Overlay).
- Эффекты — Glow, Drop Shadow и другие из панели Effects не поддерживаются; их нужно заменять на Layer Styles или Shape-слои.
- Растровые изображения — если внутри анимации есть bitmap, размер JSON резко возрастает, а на слабых устройствах возможны фризы.
По статистике наших проектов, 70% AE-проектов требуют доработок перед экспортом. Поэтому аудит — обязательный первый шаг.
Какие AE-функции несовместимы с Lottie?
Самый частый сценарий провала — использование expressions для динамического поведения или эффекта Glow через панель Effects. После экспорта анимация либо ломается, либо выглядит иначе. Мы проверяем каждый слой, заменяем неподдерживаемые эффекты аналогичными из Shape-слоёв или Layer Styles. Например, в одном проекте с 12 экранами онбординга мы заменили 8 expressions на keyframes — анимация стала воспроизводиться на Android 9 без единого фреймдропа.
Как оптимизировать JSON для мобильных приложений?
Стандартный Bodymovin-экспорт без оптимизации даёт раздутый JSON. Мы прогоняем его через lottie-minify или LottieFiles Optimizer — сжатие составляет 30–50% от исходного размера без потери качества. Например, анимация онбординга на 5 экранов после оптимизации весит 150–200 КБ, что в 3 раза меньше исходного. Это критически для быстрой загрузки приложения и экономии трафика пользователя.
Размер JSON напрямую влияет на время загрузки, парсинга и потребление памяти. Оптимизированный JSON (150-200 КБ вместо 500+ КБ) сокращает время десериализации на 40% и снижает риск фреймдропов на устройствах с 2 ГБ RAM. Для приложений с десятками анимаций (онбординг, лоадеры, микроинтеракции) это разница между плавным UX и подтормаживаниями. Lottie — кроссплатформенная библиотека анимаций от Airbnb.
Как мы готовим анимацию к экспорту
Используем плагин Bodymovin (LottieFiles AE Extension) с такой подготовкой:
- Конвертируем все expression в keyframes:
Animation → Keyframe Assistant → Convert Expression to Keyframes. - Объединяем Shape-слои, где возможно — меньше слоёв = меньший JSON.
- Убираем неиспользуемые слои и скрытые precomp-ы.
- Растеризуем bitmap-изображения или заменяем векторными аналогами (bitmap в Lottie — отдельный файл или base64, сильно ухудшает размер).
- Проверяем Preview в LottieFiles Web Player до финального экспорта.
После экспорта — проверка через LottieFiles Preview App на реальных устройствах iOS и Android. Часто обнаруживается: на Android некоторые blend modes дают неправильный цвет, а gradient strokes рендерятся иначе — это мы исправляем до передачи вам.
Пример из практики. Клиент принёс AE-проект онбординга из 5 экранов. Исходный размер JSON — 2.8 МБ. После оптимизации (удаление дублирующихся слоёв, конвертация expression, замена bitmap на вектор) — 190 КБ. На старом Samsung Galaxy A5 анимация воспроизводилась без единого фреймдропа. Время загрузки по 3G сократилось с 12 до 2 секунд.
Почему оптимизация JSON критична для мобильных приложений?
Каждый лишний килобайт замедляет загрузку и увеличивает расход батареи. Наше тестирование показало: анимация 200 КБ декодируется за 8 мс на iPhone 11, а 800 КБ — за 35 мс. Разница в 4+ раза по времени, что критично при 10 анимациях на экране. Оптимизированный JSON занимает до 70% меньше места в кэше, что особенно важно для приложений с ограниченным хранилищем.
Интеграция в мобильные проекты
| Платформа | Библиотека | Подключение |
|---|---|---|
| iOS | lottie-ios (SPM) | LottieAnimationView как UIView, для SwiftUI — LottieView |
| Android | lottie-android (Gradle) | LottieAnimationView в XML, LottieAnimation в Compose |
| Flutter | пакет lottie | Lottie.asset('assets/animation.json') с контроллером |
Для двусостояний (toggle) используем setMinAndMaxProgress — воспроизводим только нужный диапазон кадров, что экономит ресурсы.
Этапы работы
| Этап | Длительность | Результат |
|---|---|---|
| Аудит AE-проекта | 1 день | Отчёт по несовместимым функциям, рекомендации |
| Экспорт и оптимизация | 1 день | JSON размером до 200 КБ, сжатие до 50% |
| Интеграция на одну платформу | 1–2 дня | Работа на реальных устройствах, документирование |
Что входит в нашу услугу
- Аудит AE-проекта на совместимость с Lottie.
- Экспорт через Bodymovin с предварительной подготовкой.
- Оптимизация JSON (сжатие до 50%).
- Интеграция на одну платформу (iOS/Android/Flutter) с тестированием на реальных устройствах.
- Гарантия соответствия App Store Review Guidelines и Play Console требованиям.
- Документация по воспроизведению и поддержка после внедрения.
Сроки и условия сотрудничества
Экспорт и интеграция одной анимации занимают от 1 дня. Для комплексных проектов (5+ анимаций) сроки рассчитываем индивидуально. Свяжитесь с нами — мы бесплатно оценим ваш AE-проект и предложим оптимальное решение под ключ. Получите консультацию прямо сейчас и убедитесь, что ваша анимация будет работать идеально на всех устройствах. Закажите аудит AE-проекта — это первый шаг к бесшовной анимации в вашем мобильном приложении.