Comments 22
Осталось понять, где собственно анимация-то. Вижу кучу статических объектов, положение и ориентация которых изменяются. Это за три минуты накрокодить можно.
GIF? APNG, WEBM, WEBP!
SWF
Silverlight!
SVG SMIL :-)
Кстати, Lottie несколько дней назад представили редактор Lottie Creator
Теперь понятно почему простейшие приложения такие огромные :-( И понятно кто за это несёт ответственность... Даже поименно...
Не чокаясь за него :D
Я тоже умею показывать фокусы со сжатием:
«…текст статьи…» → «Вектор весит меньше растра!»
Четыре слова. Ни одной картинки.
Мне кажется, или уважаемые делали мов там где это не надо было?
Не побоюсь быть токсичным, но кажется тут что то на не профессиональном, из разряда "а вы знали, что если использовать не BMP, а png24, то вес файла СИЛЬНО УМЕНЬШИТСЯ"?
Это похоже на манипулирование фактами. 1) Сколько весит библиотека, которую должен инсталировать каждый пользователь что ваша анимация заиграла? 2) Приведите пример как вы создавали изначальное видео... все размеры параметры и тд... Можно новое видео смотреть на тех же устройствах ?
У вас очень примитивная анимация и её можно б было сделать вообще без библиотек, если б было желание и необходимость... Так что сомнительные выводы...
ПС Я когда-то удалял эту анимацию с сайтов, поскольку они что-то свое на сторонние сервисы шлют... Включите Google Page Speed и вы поймете что там не всё прям так радужно.
Открою секрет: видеофайлы, о которых вы говорите, не предназначены для конечного использования. Это высококачественное видео с только-ключевыми кадрами для максимального сохранения качества картинки и ускорения работы с ней в видеоредакторе, в каком-нибудь ProRes.
А видеокодеки, предназначенные для распространения, определяют векторы движения объектов для вашего случая достаточно хорошо, чтобы не нужно было тратить время на программирование.
Возьмём вашу первую, кхм… гифку размером в 3 мегабайта
На ней почти все элементы только перемещаются, и чуть-чуть появляются новые. Вот так видеокодек видит движение на этом файле:
ffmpeg -flags2 +export_mvs -i input.mp4 -crf 22 -preset slow -vf codecview=mv=pf+bf+bb -movflags faststart -y outv.mp4
Много «невидимых» объектов куда-то двигаются — это из-за шума в оригинальном «видеоряде», не видном невооруженному глазу. Применим денойзер hqdn3d с широким значением подавления. Убедимся, что по-максимуму используются «разностные» (P) кадры, ссылающиеся на предыдущие, и «обратные» (B) кадры, которые могут ссылаться на кадры в будущем (-preset slower разберётся).
ffmpeg -i 1ab22a00dc9cdb7f5d0c6dbaaf1c5b11.gif -crf 19 -pix_fmt yuv420p -preset slower -tune animation -vf hqdn3d=luma_spatial=20.0 -movflags faststart -y out.mp4
Ну вот, куда лучше! Векторы появляются почти всегда только там, где действительно есть видимое движение.
Что у нас там с размером файла?
$ ls -lh out.mp4
-rw-r--r--. 1 valdikss valdikss 323K фев 13 02:21 out.mp4
Божечки-кошечки, да мы же уменьшили вес продуктовой анимации в 495 раз (без AI)!
Векторные изображения это хорошо, качественно и правильно, но иногда временны́е усилия не стоят того. Я потратил на кодирование, может быть, полторы минуты. К слову о 60 FPS: видео не обязано иметь фиксированный фреймрейт и может иметь произвольные временные интервалы между кадрами.
Результат:
Ну дык это ж надо изучать инструмент, с которым работаешь. А это не для миллениалов, которым нужно, чтобы была кнопка "сделать мне хорошо".
Drop the mic
У меня первая строка не вывела вектора на видео, просто темнота
del
Вспомнился убитый Flash с оптимизацией растра в png8. Всплакнул.
Спасибо за статью! Только есть нюанс — для корректной работы библиотеке lottie-web нужен eval.
Соответственно, если в компании строгие правила CSP и стоит запрет на unsafe-eval, то либа не сработает, придётся искать другое решение
Честно говоря, я не впечатлен идеей. Кажется, что такие радикальные усовершенствования могут привести к существенной потере качества и реалистичности анимации. Без применения AI, это может означать уменьшение детализации и плавности движения, что отразится на пользовательском опыте. Вместо того, чтобы стремиться к сокращению размера файлов, я бы предпочел улучшение производительности и оптимизацию анимации без ущерба для ее качества."
Как уменьшить вес продуктовой анимации в 400 раз (без AI)