Сожмите свои анимации Lottie на 80% с форматом.
23 июля 2025 г.Анимации повсюду в современных потребительских приложениях. Компании используют их, чтобы привлечь внимание, направлять пользователей и создавать это запоминающееся, фирменное ощущение, является ли это восхитительным экраном брызг, плавным индикатором загрузки или праздничными баннерами в течение специальных сезонов. Как Native Developer, мы знаем, насколько много влияет хорошая анимация на поток / продукт.
За последние несколько лет, Lottie Animation (экспортируется как.jsonФайлы) стали чрезвычайно популярными. Они позволяют легко добавлять богатую, масштабируемую анимацию, не влияя на производительность. Но есть одна вещь, с которой есть большинство из нас, это это то, что файлы Lottie Json могут стать довольно большими. Даже просто выглядящая анимация может разразиться до сотен килобитов или более, особенно если у них много анимированных слоев. Для приложений, демонстрирующих несколько анимаций, таких как шаги по адаптации, динамические баннеры, значки достижений и т. Д., Это приводит к реальным проблемам.
Формат .lottie: меньше и легче
Лотти поддерживаетоптимизированныйформат называется.lottieПолем Вместо необработанного файла JSON,.lottieАнимация-это архив на молнии, который сокращает размер файла на 70-80% по сравнению с простым JSON-поэтому наша анимация 1 МБ может стать 200-300 КБ. Он также пакетов все активы (включая изображения) вместе, что сокращает проблемы с отсутствующими активами. Он идеально подходит для динамических приложений, где контент анимации может измениться с помощью конфигураций, которые отлично подходят для маркетинговых команд, сезонных баннеров или персонализации пользователей.
У нас обычно есть два варианта, чтобы включить анимацию Lottie в нашем приложении
- Анимация в приложении
- Этот метод объединяет все ваши Lottie Jsons в рамках быстрого воспроизведения приложений. Но по мере того, как вы добавляете больше анимации, размер вашего приложения увеличивается, и каждая небольшая настройка анимации означает новый выпуск приложения.
- Загрузка анимации по сети
- В качестве альтернативы, вы можете размещать свои анимации на удаленном сервере или CDN (например, S3). Это поддерживает ваше приложение загружать легкий вес и обеспечивает более гибкие обновления. Недостаток? Каждый раз, когда отображается анимация, ваше приложение снова приносит его. Пользователи с медленными или ненадежными подключениями могут застрять в ожидании-или см. Неудача/отсутствующие анимации. Плюс, он тратит мобильные данные.
Таким образом, будь вы связываете или загружаете сеть, переключившись на.lottieУже дает вам преимущества размера. Но есть возможности для лучшего опыта, с несколькими небольшими изменениями, вы можете заставить весь опыт чувствовать себя намного более плавным и надежным.
Как мы можем сделать.lottieопыт еще лучше?
С.lottieФайлы простоЗастегил jsonС (необязательными) изображениями мы можем относиться к ним точно так же, как и любой стандартный архив ZIP: извлечь их, обработать анимацию JSON, как нам нравится, и хранить готовый к использованию, все в одном JSON и кэшировать их локально для следующего использования нашего приложения. Это дает нам плавное, гибкое воспроизведение анимации на любом устройстве, в любых условиях сети, каждый раз. Вот простой рабочий процесс, которым мы можем следовать
После этих шагов вы можете загрузить и играть в JSON, как и любая обычная комплексная лотти. Поэтому, когда вы получаете.lottieФайл, сначала проверьте, существует ли уже обработанная версия JSON - если она это так, используйте ее. Если нет, загрузите его, процесс как JSON, сохраните и повторно используйте в следующий раз.
1⬇Загрузите файл анимации
Сначала скачать.lottieи хранить его локально, используя уникальное имя.
const name = extractNameFromUrl(url)
const extension = url.match(/\.(json|lottie)$/)?.[1] ?? 'json';
const lottiePath = RNFB.fs.dirs.DocumentDir + `/lottie/${name}.${extension}`;
await RNFB.config({
path: lottiePath,
}).fetch('GET', url, headers);
2📦 Разкапливаться.lottieФайл
Если анимация в.lottieФормат, мы должны расстегнуть его. Это извлекает данные анимации JSON и любые изображения, которые он ссылается.
if (extension === 'lottie') {
const extractPath = `${RNFB.fs.dirs.DocumentDir}/${name}_unzipped`;
await unzip(lottiePath, extractPath);
}
3. 🧩 Извлеките и обработайте анимацию json
Внутри распакованной папки ищитеanimationsпапка. Найдите файл анимации json:
const animationsPath = `${extractPath}/animations`;
const files = await RNFB.fs.ls(animationsPath);
const animFile = files.find(file => file.endsWith('.json'));
if (!animFile) throw new Error('No animation JSON found after unzip');
const animPath = `${animationsPath}/${animFile}`;
4. 🖼 Встроенные изображения в анимацию JSON
Иногда Lottie использует отдельные изображения (скажем, фон, значки, основные активы). Чтобы быстро сделать рендеринг, мы можем встроить эти изображения прямо в файл JSON. Это означает преобразование файлов изображений вbase64, затем обновление JSON, чтобы все изображения были упакованы в линии. По сути, если вы осмотрите JSON перед внедрением, он выглядит как что -то слева, теперь мы находим фактическое изображение сuиpключи в JSON, а затем преобразовать их вbase64и обновление ключей с этими значениями, чтобы получить наш последний JSON. Здесьuуказывает папку изображения или путь каталога иpУказывает имя файла изображения.
Ниже приведен псевдод для этого процесса.
function embedImagesInLottieJSON(animationJsonPath, imagesFolderPath):
// Read the animation JSON as text
animationJsonText = readFile(animationJsonPath, asText)
animationJson = parse(animationJsonText)
// If there are no assets, just return original JSON
if animationJson.assets is not an array:
return animationJsonText
for each asset in animationJson.assets:
if asset.u exists AND asset.p exists AND "images" in asset.u AND asset.e == 0:
// Get the image file path
imagePath = imagesFolderPath + "/" + asset.p
// If the image exists
if fileExists(imagePath):
// Read image as base64
imageBase64 = readFile(imagePath, asBase64)
// Find out file type
extension = getFileExtension(asset.p)
mimeType = (extension in ["jpg", "jpeg"]) ? "image/jpeg" : "image/png"
// Replace asset path with base64 data URI
asset.u = ""
asset.p = "data:" + mimeType + ";base64," + imageBase64
asset.e = 1 // marking it as embedded
return stringify(animationJson)
Все ссылочные изображения теперь упакованы прямо в файл JSON. После этого встроенного, сохраните обработанную JSON в «обработанную» папку для мгновенного повторного использования:
const processedDir = `${extractPath}/processed`;
const processedDirExists = await RNFB.fs.exists(processedDir);
if (!processedDirExists) {
await RNFB.fs.mkdir(processedDir);
}
const processedJsonPath = `${extractPath}/processed/embedded.json`;
await RNFB.fs.writeFile(processedJsonPath, embeddedJSON, 'utf8');
Откуда вы знаете, что многое загружается и готова?
Лучше показать соответствующий экран или запись только после того, как Lottie полностью обработана, особенно если ваша анимация является неотъемлемой частью пользовательского потока. Прежде чем показывать анимацию, проверьте, обработанный файл JSON (embedded.json) существует. Если это так, вы можете сыграть это сразу. В противном случае, сначала сделайте шаги с загрузкой-UNZIP.
const isLottieProcessed = async (animationName) => {
const processedJsonPath = `${RNFB.fs.dirs.DocumentDir}/${animationName}_unzipped/processed/embedded.json`;
return await RNFB.fs.exists(processedJsonPath);
};
Почему этот подход лучше
- Более быстрый опыт: Анимации загружаются мгновенно после первой загрузки-нет повторяющейся сети или использования данных.
- Надежный офлайн: Все активы встроены; Ничто не ломается, когда пользователь не в автономном режиме или имеет плохое подключение.
- Дистанционное управление:Маркетинговые команды и команды продуктов могут поменять или обновлять анимацию на лету, без доставки нового приложения.
- Lean Apps:Ваш размер APK или IPA остается маленьким и гибким, даже с десятками красивых анимаций Lottie.
Один небольшой улов в этом подходе-это когда мы хотим обновить или изменить что-то в анимации с большим количеством, мы обычно сохраняем его с новым именем. Это запускает весь процесс загрузки, разкачивание и встроен, что может быстро привести к дублирующим анимациям, накапливаясь на устройстве, все с немного другим контентом или версиями.
Простое исправление здесь состоит в том, чтобы использовать вывод версий в нашем именах, подобном именам, нашему файлуfirst-v1.lottieВfirst-v2.lottieи т. д. Таким образом, всякий раз, когда мы вносим какие -либо изменения, просто наденьте версию в имени файла. Затем в нашей логике извлечения или кэширования мы можем легко очистить любые старые версии и сохранить только последнюю на устройстве. Это сохраняет хранилище и гарантирует, что пользователи всегда получают правильную, актуальную анимацию без ненужных дубликатов.
Если вы не пробовали.lottieТем не менее, вы, вероятно, упускаете некоторые легкие победы, этот подход, возможно, стоит изучить.
Оригинал