Как конвертировать MP4 в Lottie для Интернета и приложений

Обычный MP4 — это пиксельное видео. Классическая анимация Lottie представляет собой векторные данные: фигуры, пути и ключевые кадры. Ни один браузерный инструмент не может превратить произвольный отснятый материал в небольшой редактируемый векторный файл Lottie с надежным качеством, а инструменты, которые утверждают, что обычно отслеживают контуры кадр за кадром, дают плохие результаты.

Практическая конверсия другая. Конвертер декодирует видео покадрово, при необходимости удаляет сплошной фон и записывает кадры в виде изображений в ZIP вместе с Lottie JSON, который воспроизводит их по порядку. Любой проигрыватель, поддерживающий графические ресурсы, может затем обращаться с клипом, как с любым другим Lottie: зацикливать его, приостанавливать или запускать из кода. Это полезно, когда в вашем приложении уже есть конвейер Lottie, а исходным материалом является видео, например наклейка, созданная искусственным интеллектом, или короткий снимок продукта.

Поскольку каждый кадр сохраняется, размер Lottie ZIP близок к числу кадров, умноженному на размер одного кадра. Количество кадров — это продолжительность, умноженная на частоту кадров. Размер рамки зависит от размеров и от того, насколько детальна картина. В приведенной выше таблице измерений приведены реалистичные значения для каждого кадра в пикселях 480: около 1.6 KB для плоских цветов, около 2 KB для типичного клипа пользовательского интерфейса, более 6 KB для детального видео и почти 10 KB для градиентного объекта с мягкими краями.

Используйте эти цифры, чтобы проверить работоспособность плана. Цикл 3-секунда в 24 fps — это кадры 72. При сложности UI-клипа это примерно 140 KB, что вполне приемлемо для экрана адаптации. 10-секундный клип на 30 fps — это кадры 300; со сложностью, близкой к 2 MB, что слишком тяжело для большинства целевых страниц. Когда арифметика получается большой, почти всегда можно исправить это сокращением продолжительности и частоты кадров, а не снижением качества.

Конвертер полностью работает в браузере. Для декодирования используется WebCodecs API, кодирование выполняется на графическом процессоре через WebGL2, а кодирование происходит локально. Исходный файл не загружен.

Выберите наибольший размер, в котором будет фактически отображаться анимация, умноженный на соотношение пикселей устройства, которое вас интересует. Для слота 240 на экране 2x требуются пиксели 480, а не 1,080. Выберите частоту кадров для движения: переходы пользовательского интерфейса и стикеры часто выглядят нормально на 12 — 15 fps, тогда как для быстрого движения камеры требуется 24 или более.

Если местом назначения является веб-страница, которой требуется только прозрачное видео, сравните экспорт WebM, прежде чем выбирать Lottie, и измерьте его на своем собственном клипе. В сентябрьских пробегах с плоскими простыми зажимами WebM составлял примерно десятую часть размера Lottie ZIP. Для градиентной наклейки результат был обратным: WebM был 1,215,389 байт, 32 на процент больше, чем 918,089-байт Lottie ZIP, и было потеряно четыре кадра. GIF был самым большим размером 1,316,183 в байтах и ​​поддерживал только полностью прозрачные или полностью непрозрачные пиксели. Руководство по сравнению форматов описывает эти компромиссы более подробно.

Разархивируйте пакет и сохраните структуру папок. JSON ссылается на каждый кадр по относительному пути, поэтому объединение папок или переименование изображений прерывает воспроизведение. Обслуживайте JSON и папку с изображениями по одному и тому же базовому пути, затем загрузите JSON в плеер, как и любой Lottie.

Проверьте память на самом низком устройстве, которое вы поддерживаете. Плеер хранит в памяти декодированные кадры, а кадры 300 в формате 480 от 480 — это нечто большее, чем векторная анимация одинаковой длины. Для длинных или больших клипов лучшим инструментом может оказаться встроенный видеоэлемент.