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

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

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

Lottie

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

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

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

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

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

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

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

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

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

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

• dotlottie-web ^[12] — веб-плеер JavaScript,

• dotlottie-wc ^[13] — интеграция Web Component,

• dotlottie-react ^[14] — интеграция React,

• dotlottie-vue ^[15] — интеграция Vue,

• dotlottie-svelte ^[16] — интеграция Svelte.

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

• dotlottie-android ^[17] — нативный плеер под Android,

• dotlottie-ios ^[18] — нативный плеер под iOS,

• dotlottie-react-native ^[19] — интеграция с React Native.

SDK:

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

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

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

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

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

{
    "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
                }
            ]
        }
    ]
}

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

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

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

• внешний файл: относительный путь к активу, хранящемуся отдельно в виде файла.

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

• URL: активы можно разместить где угодно и загружены по их URL во время выполнения.

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

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

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

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

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

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

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

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

Что добавлено в PNG ^[31] в 2025 году:

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

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

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

• APNG (анимированные PNG) добавлены в официальные спецификации. Этот формат уже давно был разработан Mozilla и поддерживался Firefox, а затем его добавили и другие программы. Теперь спецификации отразили реальность.

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

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

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

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

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

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

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

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

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

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

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

<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 нет.

© 2025 ООО «МТ ФИНАНС»