Lottie

В области графических форматов в последнее время произошло много интересных событий. Вышла новая спецификация PNG с официальным утверждением формата анимированной графики APNG, хотя его поддержка в браузерах реализована уже довольно давно.

В то же время за последние годы набрал большую популярность Lottie — новый формат векторной анимации, легковесная альтернатива анимированным GIF и APNG. Он основан на JSON и содержит текстовые описания элементов объектов и движений, с поддержкой растровых картинок, динамических скриптов и интерактивных элементов.

Файлы Lottie значительно меньше по сравнению с любыми альтернативными видеоформатами или анимированной графикой. При этом векторная анимация не зависит от разрешения устройства, поэтому идеально подходит для современного веба, который работает на тысячах устройств с разными размерами экранов.

LottieFiles — крупнейший репозиторий анимаций Lottie/Bodymovin в интернете, а также центр разработки и общения для дизайнеров и разработчиков. Здесь они могут создавать, просматривать, тестировать и делиться своими анимациями.

Немного истории

Всё началось в 2015 году, когда Эрнан Торризи (Hernan Torrisi) выпустил плагин Bodymovin для экспорта и воспроизведения анимации из Adobe After Effects в JSON-формат. Формат Lottie он назвал в честь Лотты Райнигер, пионера силуэтной анимации.

Другими словами, это была попытка экспорта проприетарного внутреннего формата After Effects. Действительно, открытый формат поддерживает многие его функции, хотя не все.

Вместе с плагином автор выпустил для современных браузеров рендерер с JavaScript-плеером — браузерное расширение Bodymovin.

В 2017 году сторонние разработчики помогли разработать библиотеки Lottie под iOS, Android и React Native, что обеспечило рендеринг векторной анимации на разных платформах. Вскоре Microsoft выпустила библиотеку Lottie-Windows, а затем свой вклад внесли и другие крупные игроки: например, в 2019 году Samsung выпустила универсальную, платформонезависимую библиотеку rLottie на С++. В том же году вышел фреймворк python-lottie для работы с форматом на Python.

Современное состояние

Сейчас Lottie — популярный формат анимации, который используется в интернете, мобильных приложениях и других системах. Для него создано множество независимых рендереров, которые отличаются по распределению рендеринга между CPU и GPU, а также по использованию памяти. Формат поддерживается в опенсорсной библиотеке ThorVG и других движках векторного рендеринга.

Существующие плееры для веба:

dotlottie-web — веб-плеер JavaScript,
dotlottie-wc — интеграция Web Component,
dotlottie-react — интеграция React,
dotlottie-vue — интеграция Vue,
dotlottie-svelte — интеграция Svelte.

Плееры для мобильных устройств:

dotlottie-android — нативный плеер под Android,
dotlottie-ios — нативный плеер под iOS,
dotlottie-react-native — интеграция с React Native.

SDK:

dotlottie-js — JavaScript SDK для создания и редактирования файлов dotLottie в соответствии со спецификациями.

В 2024 году основана организация The Lottie Animation Community для помощи в стандартизации формата. Теоретически, когда-нибудь его могут утвердить в качестве всеобщего интернет-стандарта W3C и IETF.

Текущая версия спецификации v2.0.

Описание формата

Пример кода, который выводит на экран 512-пиксельное изображение синего круга с чёрной окантовкой:

{     "v": "5.7.1",     "ip": 0,     "op": 180,     "nm": "Animation",     "fr": 60,     "w": 512,     "h": 512,     "layers": [         {             "ddd": 0,             "ty": 4,             "ind": 0,             "st": 0,             "ip": 0,             "op": 180,             "nm": "Layer",             "ks": {                 "a": {                     "a": 0,                     "k": [                         256,                         256                     ]                 },                 "p": {                     "a": 0,                     "k": [                         256,                         256                     ]                 },                 "s": {                     "a": 0,                     "k": [                         100,                         100                     ]                 },                 "r": {                     "a": 0,                     "k": 0                 },                 "o": {                     "a": 0,                     "k": 100                 }             },             "shapes": [                 {                     "ty": "el",                     "nm": "Ellipse",                     "d": 1,                     "p": {                         "a": 0,                         "k": [                             256,                             256                         ]                     },                     "s": {                         "a": 0,                         "k": [                             256,                             256                         ]                     }                 },                 {                     "ty": "st",                     "nm": "Stroke",                     "o": {                         "a": 0,                         "k": 100                     },                     "c": {                         "a": 0,                         "k": [                             0.114,                             0.157,                             0.282                         ]                     },                     "lc": 2,                     "lj": 2,                     "ml": 0,                     "w": {                         "a": 0,                         "k": 20                     }                 },                 {                     "ty": "fl",                     "nm": "Fill",                     "o": {                         "a": 0,                         "k": 100                     },                     "c": {                         "a": 0,                         "k": [                             0.196,                             0.314,                             0.690                         ]                     },                     "r": 1                 }             ]         }     ] }

Есть утилита для конвертации JSON в dotLottie.

В 2020 году был представлен открытый формат dotLottie, объединяющий множество файлов и ресурсов Lottie (включая манифест и превьюшки) в едином контейнере, zip-архиве с deflate-сжатием. Он примерно в десять раз меньше по размеру, чем такая же анимация в формате GIF:

Lottie может представлять графические ресурсы несколькими способами:

внешний файл: относительный путь к активу, хранящемуся отдельно в виде файла.
URI данных: строка в кодировке Base64 с двоичным файлом изображения (это значительно увеличивает размер файла).
URL: активы можно разместить где угодно и загружены по их URL во время выполнения.

Сжатие в единый файл zip позволяет сгруппировать все ресурсы и значительно уменьшить общий размер. Файлы dotLottie могут содержать несколько анимаций в одном файле, они распаковываются через плеер. Можно переключаться между анимациями в зависимости от действий пользователя и событий. Формат также поддерживает тематизацию (с переопределением свойств анимации на лету, включая цвета, толщину обводки, градиенты и любые анимированные свойства) и интерактивность (собственные определения конечных автоматов).

За пределами круга дизайнеров и аниматоров Lottie стал печально известен в прошлом году, когда npm-пакет lottie-player был взломан и использовался злоумышленниками.

Заражённые версии плеера содержали код для привязки криптокошелька посетителя, что потенциально позволяет посторонним лицам украсть средства с него. При посещении сайта и загрузке в браузер заражённого плеера lottie-player.js посетитель видел такое всплывающее окно:

Как показало расследование, заражённые версии 2.0.5, 2.0.6 и 2.0.7 были опубликованы в репозиторий пакетов NPM с помощью оригинального токена автоматизации npm, украденного у разработчика, и даже защита 2FA не помогла в данном случае.

Когда-то Flash широко использовался для внедрения эксплоитов, а сейчас для этой цели используют плееры векторной анимации, так что история в каком-то смысле повторяется.

Новые спецификации PNG

Если говорить о новых форматах изображений, то в июне 2025 года была приняты новые спецификации PNG, третья редакция (Third Edition), в котором официально утверждены анимированные PNG, среди прочих изменений.

Впервые обновившись после двух десятилетий стагнации, формат PNG снова претендует на роль современного стандарта кодирования и сжатия изображений, наравне с WebP и AVIF, которые отбирают у него эти лавры.

Что добавлено в PNG в 2025 году:

Корректная поддержка HDR (в том числе и на будущее).

На рисунке вверху показан цветовой диапазон, доступный для человеческого зрения. Маленький треугольник внутри — цветовое пространство большинства изображений. Больший внешний треугольник Rec2020 — цветовой диапазон HDR

По факту в PNG реализована поддержка не просто HDR, а системы кодовых точек Coding Independent Code Points, которая определяет параметры сигнала: цветовое пространство, функцию передачи, матричные коэффициенты и т. д. Оно используется в стандартах ITU-T H.273 и ISO/IEC 23091-2, применяется в кодеках AVC, HEVC, AVIF и др. То есть теперь PNG по этой технологии сравнялся с самыми продвинутыми кодеками.

Поддержка CICP требует всего 4 байта (плюс обычные накладные расходы PNG-блока), см. более подробное техническое описание.

APNG (анимированные PNG) добавлены в официальные спецификации. Этот формат уже давно был разработан Mozilla и поддерживался Firefox, а затем его добавили и другие программы. Теперь спецификации отразили реальность.
Официальная поддержка данных EXIF. Заголовки EXIF в файле содержат дополнительную информацию о документе, такую как данные о копирайте (автор фотографии), параметры съёмки: название камеры, параметры объектива, выдержка и диафрагма, GPS-координаты съёмки и др.

После двух десятилетий относительного застоя сейчас работа над спецификациями PNG возобновилась с новой силой. Рабочая группа PNG с участием Adobe, Apple, BBC, Comcast/NBCUniversal, Google, MovieLabs и W3C, то есть всех крупных игроков, трудится над созданием двух новых версий спецификаций. Речь идёт о четвёртой и пятой редакциях. В небольшом четвёртом апдейте планируют улучшить совместимость между HDR и SDR, а в пятом будут уже серьёзные изменения по сжатию изображений.

Новая версия PNG поддерживается в последних версиях всех браузеров, Photoshop и другом ПО.

Сжатие без потерь c float-каналами

Если сравнивать различные кодеки и форматы для сжатия без потерь в форматах хранения значений с плавающей точкой (float), то в здесь отлично проявляет себя формат OpenEXR. В нём недавно добавили новый режим сжатия HTJ2k, который базируется на алгоритмах High-Throughput JPEG 2000.

В таких форматах значения пикселей хранятся не в целочисленном формате, а в формате чисел с плавающей точкой (обычно 16-bit или 32-bit float). Это даёт гораздо больше точности и диапазона для представления цвета и яркости. Формат лучше подходит для кодирования изображений типа HDR с широким динамическим диапазоном. Он также уменьшает количество округлений и потерь при обработке фильтрами и цветокоррекции. Поэтому OpenEXR широко применяется в кинематографе, научной визуализации, медицинской графике, профессиональной графике и 3D-рендеринге.

Тестирование кодеков для сжатия изображений floating point

В результатах тестов OpenEXR-HTJ2k обеспечивает чуть лучшее сжатие, чем OpenEXR-ZIP, но пока есть проблемы с производительностью. Ещё более серьёзные проблемы со скоростью сжатия у JPEG-XL (libjxl). При этом совершенно неожиданно великолепные результаты по скорости и компрессии показала опенсорсная библиотека Mesh Optimizer от Арсения Капулкина, которая вообще предназначена не для сжатия изображений, а для оптимизации рендеринга. Но оказалось, что и со сжатием она отлично справляется (в последовательной цепочке с zstd).

Напомним, что в PNG сжатие без потерь обеспечивает компрессор ZIP, так что его результаты должны быть примерно сопоставимы с OpenEXR-ZIP.

И ещё интересный момент: в случае сжатия без потерь можно последовательно объединять в цепочку несколько кодеков, это улучшит коэффициент сжатия.

В общем, форматы изображений продолжают совершенствоваться. Специалисты возобновили работу над старым PNG. В то же время приятно видеть и появление принципиально новых форматов, таких как Lottie, и эффективное применение в специализированных областях посторонних инструментов, как Mesh Optimizer.

В векторной анимации с Lottie теоретически может конкурировать SVG, который поддерживает анимацию через JavaScript, но это чуть более сложный формат, хотя кому-то он может показаться более нативным. Например, вот анимация красного круга, который за восемь секунд перемещается по экрану слева направо с остановкой в конце:

<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">   <circle cx="50" cy="50" r="50" style="fill:red;">     <animate       attributeName="cx"       begin="0s"       dur="8s"       from="50"       to="90%"       fill="freeze" />   </circle> </svg>

Но анимации Lottie создаются в современных графических редакторах уровня After Effects (+плагин Bodymovin), с поддержкой сложных эффектов, чего у SVG нет.

ссылка на оригинал статьи https://habr.com/ru/articles/938958/

Lottie — новый стандарт векторной анимации