Руководство EasyLottie
Что такое файл .lottie? dotLottie против Lottie JSON
Что находится внутри файла .lottie, как формат менялся между версиями, как его открыть, а также измеренный тест того, когда dotLottie действительно сохраняет байты.
Короткий ответ
Файл .lottie, обычно называемый dotLottie, представляет собой архив ZIP с фиксированным внутренним макетом. Он содержит одну или несколько анимаций Lottie как JSON, а также дополнительные изображения, шрифты, темы и конечные автоматы, а также манифест, в котором перечислено, что находится внутри. Данные анимации — это те же Lottie JSON, которые вы уже знаете. dotLottie меняет упаковку, а не анимацию.
Формат существует для решения проблемы доставки. Lottie с внешними изображениями — это несколько файлов, которые должны путешествовать вместе, а набор связанных анимаций — это несколько запросов. Один пакет легче загрузить, кэшировать и передать.
Что находится внутри файла .lottie
Переименуйте любой файл .lottie в .zip и откройте его. В текущей спецификации dotLottie 2.0 вы найдете манифест .json в корне и короткие имена папок: a для анимации, i для изображений и, опционально, t для тем, s для конечных автоматов и f для шрифтов. Манифест должен содержать поле версии со значением «2» и массив анимаций, где каждая запись имеет идентификатор, соответствующий файлу в папке. Архив сжат с помощью Deflate, а зарегистрированный тип носителя — application/zip+dotlottie.
Старые файлы соответствуют спецификации 1.0, в которой используются более длинные имена папок: анимация для JSON и изображения для растровых изображений. Обе версии требуют манифеста с версией и анимацией. Наш фирменный значок .lottie представляет собой минимальный пакет 2.0, 83-байтовый манифест плюс один файл анимации. Product-card.lottie добавляет папку i, содержащую снимок экрана карты, как обычный PNG, на который анимация JSON ссылается с путем /i/img_0.png.
| Содержание | Версия папки 1.0 | Версия папки 2.0 |
|---|---|---|
| Lottie анимация (JSON) | анимации/ | а/ |
| Ресурсы изображений | изображения/ | я/ |
| Темы | - | т/ |
| Государственные машины | - | с/ |
| Шрифты | - | ж/ |
| Манифест | manifest.json | манифест.json, версия «2» |
Сравнение dotLottie, Lottie JSON и ZIP
Все три содержат одни и те же данные анимации. Они различаются количеством файлов, перемещаемых вместе, и способом их сжатия.
| Формат | Что это такое | Лучшее для |
|---|---|---|
| .json | Один текстовый файл данных анимации. | Одновекторная анимация, обслуживаемая веб-сервером сжатия. |
| .lottie | ZIP с манифестом и фиксированными папками. | Анимация с большим количеством изображений, несколько связанных анимаций, тем или интерактивности. |
| .zip | Специальная папка JSON плюс изображения. | Передача JSON, который ссылается на внешние файлы изображений |
Как открыть или просмотреть файл .lottie
Перетащите файл в EasyLottie Preview. Он распаковывает архив в вашем браузере, находит анимацию, читая манифест, разрешает любые изображения и начинает воспроизведение. На панели информации о файле показано, какой файл внутри пакета воспроизводится, а также его частота кадров, продолжительность и размеры. Ничего не загружается.
Это самый быстрый способ убедиться, что загруженный файл .lottie содержит ожидаемую анимацию, прежде чем интегрировать его. Если вам нужно перекрасить его или заменить изображение, сначала извлеките JSON; инструменты редактирования работают на JSON или ZIP.
Какой из них вам следует отправить?
Измеряйте, а не предполагайте. Для одной небольшой векторной анимации, обслуживаемой CDN, которая сжимает JSON, в нашем тесте обычный JSON загружался меньшего размера. При наличии одного встроенного образа они фактически были связаны между собой HTTP, а размер пакета на диске был 27 на процент меньше. Для нескольких анимаций, которые загружаются вместе, или для проигрывателя, использующего темы и конечные автоматы dotLottie, формат пакета окупает себя.
Также проверьте время выполнения. Если приложение напрямую использует lottie-web, JSON является собственным вводом. Если уже используется проигрыватель dotLottie, .lottie удаляет этап распаковки. Что бы вы ни получили от дизайнера или торговой площадки, сначала просмотрите это, чтобы знать, с чем работаете.
Быстрый контрольный список
- Переименуйте копию в .zip, чтобы увидеть, что содержит .lottie.
- Проверьте версию манифеста: версия 1 использует анимацию/, версия 2 использует /.
- При оценке размера сравнивайте с gzip или Brotli JSON, а не с необработанным JSON.
- Используйте dotLottie для изображений, нескольких анимаций, тем или конечных автоматов.
- Прежде чем переключать форматы, убедитесь, что ваш плеер поддерживает .lottie.
Воспроизведите рабочий процесс
Используйте эти локальные образцы файлов, чтобы повторить проверки, описанные в этом руководстве. Просмотрите файл перед использованием его в рабочем проекте.
Результат проверки: .lottie меньше, чем JSON?
Мы упаковали две анимации в файлы dotLottie 2.0, соответствующие спецификации, со стандартным Deflate ZIP: векторный значок и карточку с одним 27 KB PNG, хранящимся в виде двоичного файла в i/. Мы сравнили каждый из них с его обычным JSON в том виде, в котором он хранится, и поскольку веб-сервер обычно отправляет его с помощью gzip или Brotli. Все четыре файла открываются в программе просмотра EasyLottie.
| Измерение | Векторный бейдж, без изображений | Карта с одним PNG |
|---|---|---|
| JSON в состоянии хранения | 6,823 байт | 38,540 байт |
| JSON отправлен с помощью gzip | 774 байт | 28,349 байт |
| JSON отправлен с Бротли | 669 байт | 28,024 байт |
| Пакет .lottie | 1,075 байт | 28,223 байт |
| .lottie против gzip JSON | 39% больше | 0.4% меньше |
По сравнению с необработанными файлами dotLottie намного меньше: процент 84 для значка и процент 27 для карты, главным образом потому, что PNG больше не является базовым текстом 64. Это имеет значение везде, где файлы не сжимаются при транспортировке, например ресурсы, включенные в приложение.
По сравнению с тем, что реально скачивает браузер с сервера, сжимающего JSON, выигрыш пропадает. Векторный значок был 39 на процент больше, чем .lottie, поскольку заголовки ZIP и манифест стоят около 300 байт. В любом случае карта была в пределах полпроцента. Практическими причинами выбора dotLottie являются упаковка, несколько анимаций, тем и конечные автоматы, а не необработанные байты вместо HTTP.
Знайте пределы
- Не каждый игрок читает .lottie. Классический вызов lottie-web loadAnimation ожидает JSON; Для dotLottie требуется проигрыватель с поддержкой dotLottie или этап распаковки.
- Пакеты версии 1 и версии 2 используют разные имена папок. Инструменты, написанные для одного, могут не найти анимацию в другом.
- Инструменты редактирования, работающие с JSON, включая большинство редакторов цвета, сначала требуют извлечения JSON. Файл .lottie — это контейнер, а не отдельный формат анимации.
- В наших тестах размера используются два небольших файла. Результаты для больших анимаций с большим количеством изображений различаются, и их следует измерять на собственных ресурсах.
Если ваш результат отличается
- 1.Если файл .lottie не открывается, переименуйте копию в .zip и откройте ее. Если и это не помогло, файл поврежден или не является пакетом dotLottie.
- 2.Внутри ZIP найдите манифест.json и папку анимации (версия 1) или папку (версия 2). Анимация — это файл JSON внутри.
- 3.Если ваш проигрыватель не может загрузить .lottie, извлеките JSON и его изображения и вместо этого загрузите JSON, сохранив пути к изображениям.
- 4.Если анимация воспроизводится, но изображения отсутствуют, проверьте наличие папки с изображениями: images в версии 1, i в версии 2.
Часто задаваемые вопросы
..lottie вариант №
Файл dotLottie — это архив ZIP с манифестом и фиксированными папками, который содержит одну или несколько анимаций Lottie JSON, а также дополнительные изображения, темы, конечные автоматы и шрифты.
Всегда ли .lottie меньше, чем JSON?
Нет. Наш значок 6,823 стал байтом 1,075 .lottie, но тот же JSON, отправленный с помощью gzip, был байтом 774. С изображением 27 KB внутри .lottie и gzip JSON оказались в пределах полпроцента. dotLottie явно выигрывает только тогда, когда файлы не сжимаются при транспортировке.
Как открыть файл .lottie?
Перетащите его в EasyLottie Preview, который распакует и воспроизведет его локально. Вы также можете переименовать его в .zip и открыть с помощью любого архиватора, чтобы увидеть JSON внутри.
Что изменилось в dotLottie 2.0?
Имена папок стали однобуквенными (a, i, t, s, f), версия манифеста — «2», а спецификация добавляет темы, конечные автоматы и шрифты.
Могу ли я редактировать файл .lottie напрямую?
Сначала извлеките JSON. Редакторы цвета и изображений работают с анимацией JSON или ZIP из JSON плюс изображения; вы можете впоследствии переупаковать, если вашему плееру нужен .lottie.
Первоисточники
Техническое поведение было проверено на соответствие исходной документации по среде выполнения или формату, приведенной ниже.