Как скачать анимированные стикеры из телеграм
А теперь о подробностях реализации.
Всё началось с дискуссии в чатике Telegram-разработчиков о грядущей фиче:
Мужик сказал — мужик сделал! Первый прототип на Pillow и svgwrite, разбирающий GIF'ку на пиксели и преобразующий их в векторные квадратики с предпросмотром в SVG, был написан за один выходной.
Веселье началось дальше…
JSON — открытый формат, говорили они.
Доселе с форматами в Telegram то и дело хитрили. Сделали поддержку GIF-анимаций — на самом деле они конвертируются в MP4-видео. Сделали поддержку стикеров — выгружаются они в PNG, но преобразуются в WebP. В этот раз всё честнее: что на входе, то и на выходе.
Для анимированных стикеров в Telegram используется не GIF, не видео, и даже не какой-нибудь устоявшийся формат векторной графики типа SVG или — упаси Ктулху! — Flash. В нём задействован новомодный формат, вышедший из-под крыла Airbnb — Lottie. Доселе он имел некоторую известность в среде мобильных разработчиков, но благодаря Telegram, возможно, обретёт бо́льшую популярность.
По сути своей, файлы Lottie являются сериализованными в JSON проектами Adobe After Effects, по максимуму реализующими все возможности этой программы. С отображением, увы, всё не так радужно. Хотя готовых «официальных» реализаций библиотеки для рендеринга Lottie и много, как раз под покрываемые Telegram платформы: Android, iOS, Qt и Web — лишь часть из возможностей формата реализована во всех из них. В Telegram пошли ещё дальше и ограничили перечень поддерживаемых возможностей, а также «придумали» свой формат, который отличается от обычного Lottie всего лишь упаковкой в GZip и параметром "tgs": 1 . Кажется, я знаю, где сейчас работает Денис Попов! :-)
И если с документацией на библиотеки для разных платформ всё довольно неплохо, то найти хоть какое-то описание устройства формата, увы, не удалось — только JSON-схему в исходниках lottie-web. Пришлось попутно ковыряться в существующих анимациях, дабы понять общие концепции формата. Также обнаружились расхождения реальных файлов со схемой: в частности, в слоях типа 4, согласно схеме, вложенные объекты хранятся в свойстве "it" — однако в реальных файлах ключ называется "shapes" , а "it" не работает.
Выясненные нюансы формата:
- Файл состоит из слоёв. В отличие от GIF, здесь у каждого слоя может быть произвольное время начала и конца отображения. К слою можно (точнее, нужно) применять различные трансформации: масштабирование, повороты, изменение прозрачности и т.д. Слои могут быть даже трёхмерными (запрещено для Telegram).
- Слой состоит из «фигур» (shapes). Типов у них много, некоторе нельзя использовать в Telegram. На практике, чтобы слой отобразился, он должен включать три фигуры: контур (в готовых анимациях это обычно тип "sh" — кривые Безье; конвертер пока использует только тип "rc" — прямоугольники), заливка (тип "fl" ) и трансформация (тип "tr" ).
- Можно даже включать растровые элементы, создавать текстовые слои, устанавливать взаимосвязи параметров слоёв и фигур через выражения. Вся эта вкуснотища также запрещена в Telegram.
Казалось бы, это и не проблема вовсе? Даже простенький GZip неплохо справляется со сжатием вопиюще повторяющихся данных, и 1 МБ сырого JSON магическим образом превращается в пару десятков килобайт, которые спокойно пролезают в заявленное ограничение в 64 кБ. Не тут-то было!
Загружаю я, значит, пухленькую анимацию, которая спокойно отображается lottie-web, в Telegram — и тут вместо условно красивого пиксель-арта на меня смотрит статическое размазанное вот это:
Что такое?! А оказалось, на разжатые данные тоже есть явно не указанное ограничение в 1 МБ. Представитель команды Telegram оперативно подтвердил его и сообщил о грядущем поднятии лимита до 2 МБ.
Даже если эти проблемы решат — стикеры, выходящие за пределы 1 МБ несжатых данных и не содержащие трансформаций, окажутся недоступными для пользователей старых версий Telegram. Так что придётся, видимо, соблюдать ограничения и впредь.
Прозрачность — это важно
Pillow, наряду с OpenCV, можно назвать индустриальным стандартом для обработки изображений в Python. Мало того, он неплохо заточен и под особенности GIF: поддерживает индексированные цвета, даёт доступ к палитре. Поддерживает преобразование пиксельной карты в NumPy-массив, что важно для продуктивной обработки. Даже статистику по цветам собирает! Но обнаружились и минусы:
- Не нашлось задокументированного способа получить индекс прозрачного цвета. Пришлось в качестве временного решения подразумевать, что прозрачный цвет — самый распространённый, но в реальных GIF'ках это не всегда так.
- То же самое с задержкой между кадрами: Pillow отдаёт только сами кадры как последовательность изображений, без информации о задержках.
- Иногда некорректно накладываются частичные кадры.
Проблему с частичными кадрами решить оказалось нетривиально. gif2numpy пытается накладывать такие кадры на предыдущий, однако не проверяет параметры наложения, из-за чего также не всегда выходит правильный результат. Дабы не возиться с флагами, добавлена предварительная обработка изображений с помощью gifsicle с ключом --unoptimize — он преобразует частичные кадры в полные. А заодно приводит их к использованию глобальной палитры, что устранило необходимость отдельным образом обрабатывать прозрачный цвет при использовании собственной палитры кадра.
Сожми меня сильнее
Квадратики — это хорошо, но с такими ограничениями нужно проявить больше фантазии, иначе в Telegram не «пролезают» даже миниатюрные GIF'ки.
Далее — черёд эксплуатации особенностей Lottie. Поскольку каждый слой имеет произвольное время начала и конца — можно применить технику, которая давным-давно используется видеокодеками, и отчасти в самом GIF: квадратики, которые остаются на одном месте в течение нескольких кадров, можно слить в один слой, во время отображения которого сменяется несколько других. Что и реализовано, пока только для пар соседних слоёв.
Планы по развитию
Идей, которые здесь можно применить, навалом:
- Распознавать одноцветные области любого размера. Можно разбивать их на набор прямоугольников, для чего есть неплохой алгоритм. Также целесообразно преобразовывать их в контур, но это омрачается необходимостью указывать все точки кривых Безье в Lottie — прямоугольниками в некоторых случаях может быть выгоднее.
- Распознавать движение. Техника, опять-таки, издревле применяющаяся в видеокодеках. Если один и тот же контур не меняет форму от кадра к кадру, но лишь координаты — стоит вместо дублирования на нескольких слоях поместить его на один слой с трансформацией.
- Распознавать «накрытие» одних областей другими. Пример:
Поэтапно разберемся во всех нюансах при разработке такого стикера. Начиная с программного обеспечения и заканчивая публикацией в Telegram.
Так что же из себя представляет этот анимированный стикер?
Это собственный формат Telegram — .tgs, который основан на технологии lottie.
Lottie — это движок от Airbnb, который позволяет проигрывать анимации на основе json, созданного с помощью плагина Bodymovin для Adobe After Effects. Такой же плагин существует и для стикеров Telegram и называется аналогично — Bodymovin-TG.
-
или другой векторный графический редактор. + плагин Bodymovin-TG.
Скачиваем с сайта разработчика плагин bodymovin-tg.zxp необходимый для экспорта анимации в формат .tgs.
Для установки потребуется ZXPInstaller — приложение для установки расширений для Adobe.
Открываем ZXPInstaller и переносим плагин в окно программы.
Так же можно кликнуть и выбрать файл из всплывающего окна проводника.Открываем Adobe After Effects и заходим в раздел настроек — «сценарии и выражения».
Ставим галочку напротив «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети».
Открываем Adobe Illustrator и выбираем в строке меню «файл» -> «новый».
Во всплывающем окне задаем параметр 512 на 512 пикселей, исходя из требований к размеру стикера.
Для рисования векторного стикера потребуются определенные навыки и знания основных инструментов, поэтому рекомендуется ознакомится с базовыми принципами рисования на сайте Adobe.
Изображение на стикере не должно выходить за края холста.
Существует альтернативный способ (Трассировка) с помощью которого любая картинка превращается в векторную. Будет очень полезно, для быстрого переноса своих растровых изображений в вектор.
В качестве примера возьмем изображение стикера из интернета.
Импортируем изображение в рабочую среду Adobe Illustrator (перенос в окно программы изображения). И проводим указанные действия из видео:
- Трассировка изображения. («Окно» -> «Трассировка изображения»)
- Разобрать. («Объект» -> «Трассировка изображения» -> «Разобрать»)
- Разгруппировать. («Объект» -> «Разгруппировать»)
Трассировка прошла успешно, но алгоритм не всегда точно угадывает форму объекта за элементом. С помощью встроенных инструментов можно устранить эти недостатки.
Выбираем в строке меню «файл» -> «Сохранить как». Сохраняемый тип файла .ai. Во всплывающем окне ставим галочку напротив «Создать PDF-совместимый файл».
Анимация должна быть цикличной , то есть первый кадр анимации должен совпадать с последним кадром.
Использование этих функций в Adobe After Effects приведет к критическим ошибкам при экспорте стикера:
Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers
Открываем Adobe After Effects и выбираем в строке меню «композиция» -> «Новая композиция».
Во всплывающем окне «Настройки композиции» указываем параметры стикера с учетом официальных требований к анимированным стикерам, такие как:
- Размер — 512 на 512 пикселей.
- Частота кадров — 30 или 60 кадров в секунду. Выбор частоты будет влиять на количество кадров в проекте. Лучше всего выбрать 60 — это обеспечивает большее пространство для анимации.
- Длительность — 3 секунды.
Переносим файл со стикером в рабочую среду Adobe After Effects.
Кликаем правой кнопкой по стикеру, выбираем «создать фигуры из векторного слоя».
После создания векторного слоя, можно удалить слой Sticker.ai, который в дальнейшем не потребуетсяДля примера произведем анимацию 3 элементов в стикере.
Разберем подробнее, как анимировать данные элементы в After Effects:
Раскрываем слой "Кривые Sticker" и находим группу с необходимым объектом, быстрее всего это можно сделать кликнув по элементу в окне предпросмотра.
Выбираем пункт "Положение" и активируем его нажав на значок секундомера. После двигаем временную шкалу чуть вперед и передвигаем объект с помощью мыши или вручную, изменяя численное значение "Положение".
Аналогично (1) пункту, за исключением того, что теперь изменять нужно масштаб , а не положение.
Выбираем пункт "Контур" и активируем его нажав на значок секундомера.
Для создания такой анимации потребуется тянуть за «синий квадратик», изменяя тем самым форму объекта и постепенно довести её до требуемого состояния.
Выбираем пункт «Расширения» и находим там плагин Bodymovin.
Отмечаем композицию и выбираем место сохранения нажатием на "троеточие".
После нажимаем на кнопку Render.
Если всё пройдет удачно, в выбранном вами месте появится файл .tgs.
Открываем Telegram и находим в поиске бота @Stickers.
Для начала работы с ним отправляем команду /start.
У всех стикеров в наборе должна быть одинаковая частота кадров. Иначе придется делать два разных пака — для 30 и 60 кадров в секунду.
Отправляем команду /newanimated. После выбираем название и получаем следующую инструкцию:
Спасибо! Теперь отправьте мне, пожалуйста, будущий анимированный стикер — файл в формате TGS, созданный с помощью плагина Bodymovin-TG для Adobe After Effects.
Рекомендуем загружать изображения через десктопное приложение.
Бот Stickers предложит выбрать иконку для анимированных стикеров. Её нужно создать отдельно, но проще всего написать команду /skip, чтобы первый стикер показывался в качестве иконки.
Анимированные стикеры в Телеграм — это картинки, которые скачут, танцуют или выполняют любое другое действие в течение нескольких секунд. То есть принцип их работы похож на то, как устроены GIF- ки. Анимированные стикеры помогают ярче выразить эмоцию и точней передать ваши чувства собеседнику. Ниже мы поделимся популярными подборками анимированных стикеров, которые вы сможете скачать и установить себе в Телеграм.
Еще мы подготовили подробную инструкцию по созданию этих движущихся картинок самому. Поэтому, если чувствуете себя наследником Леонардо да Винчи и других творцов, обязательно изучите в этой статье, как создать анимированные стикеры Телеграм. Даже если кровь представителей искусства Высокого Возрождения в вас не течет, все равно лучше обучитесь этому тонкому ремеслу, чтобы удивлять собеседников в мессенджере.
Огромное количество наборов стикеров вы найдете в нашем каталоге. Там можно найти и скачать 6 500 самых смешных и даже пошлых стикерпаков рунета.
Подборки анимированных стикеров для Телеграм
Оставляем вам здесь ссылки на 25 наборов с анимированными стикерпаками:
Hot Cherry — энергичные вишенки.
Resistance Dog — подозрительный пес, который является символом «Цифрового сопротивления» со стороны создателя Телеграм Павла Дурова .
Office Turkey — индюк, нацепивший на себя пиджак, рубашку и галстук (вполне вероятно, что разработчики сами нацепили на индюка все это без его одобрения).
Earl The Wolf — голубой волк ( no homo!).
Minty Zebra — зебра мятного цвета.
Little Catto — очень странный кот.
Hamster Bernard — хомяк Бернард, который видимо комплексует по поводу своих форм, из-за чего старается показываться в кадре только по пояс.
Banana Fun — банан с замашками на биполярное расстройство.
The Foods — ничего сверхъестественного, просто подборка неадекватных анимированных фруктов.
Bunnyta — сексапильная крольчиха со «сделанными» губами.
Pandalicious — харизматичная панда, которая выручит на важных онлайн-переговорах.
Tidy Tie Tom — рыжий кот по имени Том с элегантной коллекцией галстуков.
Aloe Monkey — эмоциональная обезьяна.
Сберкот Animated — кот, которы й ненавязчиво рекламирует Сбербанк.
Suppy Rabbit — толстый заяц, постигший дзен.
Psy Cat — что на уме у этого кота понять трудно.
Sparks — психоделическое пони.
Fluffy Rabbit — милый кролик.
Птенчик — постигающий мир попугайчик.
Melie the Cavy — морская свинка.
Джуи — желтая инопланетяшка.
Animals — стая диких животных, которые готовы ворваться в ваш Телеграм.
U- Лайка — символ Зимней универсиады 2019 года.
Senya — дерзкий хомяк Сеня.
Воспроизведение анимированных изображений особо не скушает ваши запасы интернета.
Анимация требует лишь 20-30 килобайт трафика, с учетом того, что она плавно показывается со скоростью не более 60 кадров/сек.
По этой ссылке вы найдете ТОП-100 Телеграм каналов на темы: секс, юмор, спорт, бизнес и др.
Как загрузить анимированные стикеры в Телеграм
Загрузить уже готовые анимации в ваш мессенджер достаточно просто. Для этого нужно сделать 3 шага:
- Выберите подходящий стикерпак из предложенных выше и нажмите на его название.
- Система автоматически перенаправит вас в Телеграм для загрузки стикерпака. Если вы не авторизованы, нужно подтвердить вход с помощью ввода кода, который придет вам на мобильный телефон.
- Нажмите «Добавить стикеры».
Готово!
Как сделать анимированные стикеры в Телеграм самому
Сразу скажем, что процесс создания анимации для мессенджера — процесс не для новичков. Если не боитесь сложностей, тогда следуйте этой инструкции:
Кстати, в нашем каталоге Телеграм-каналов представлены тысячи каналов с сортировкой по странам и категориям. Заходите!
К ак делать анимированные изображения для Т елеграм разобрались? Т еперь давайте перейдем к добавлению созданных картинок в мессенджер.
Как добавить свой анимированный стикер в Телеграм
Н овые анимированные стикеры можно добавить в Т елеграм следующим образом:
- Запустите Telegram.
- Найдите бота @Stickers.
- Напишите в чат с ним команду /newanimated .
- Напишите название новой анимашки.
- Загрузите созданную анимированную картинку в чат.
- Подб ерите смайлик, который будет ему соответствовать.
- Напишите команду /publish.
- Дальше можно задать иконку для набора ваших анимированных изображений (необязательный пункт).
- Нап ишите короткий адрес для вашего стикерпака.
- Пер ейдите по созданной ссылке и добав ьте анимированный стикерпак себе в мессенджер.
Знаете, что означают серые, зеленые и даже синие галочки в Telegram? Прочитайте эту статью.
А теперь о подробностях реализации.
Всё началось с дискуссии в чатике Telegram-разработчиков о грядущей фиче:
Мужик сказал — мужик сделал! Первый прототип на Pillow и svgwrite, разбирающий GIF'ку на пиксели и преобразующий их в векторные квадратики с предпросмотром в SVG, был написан за один выходной.
Веселье началось дальше…
JSON — открытый формат, говорили они.
Доселе с форматами в Telegram то и дело хитрили. Сделали поддержку GIF-анимаций — на самом деле они конвертируются в MP4-видео. Сделали поддержку стикеров — выгружаются они в PNG, но преобразуются в WebP. В этот раз всё честнее: что на входе, то и на выходе.
Для анимированных стикеров в Telegram используется не GIF, не видео, и даже не какой-нибудь устоявшийся формат векторной графики типа SVG или — упаси Ктулху! — Flash. В нём задействован новомодный формат, вышедший из-под крыла Airbnb — Lottie. Доселе он имел некоторую известность в среде мобильных разработчиков, но благодаря Telegram, возможно, обретёт бо́льшую популярность.
По сути своей, файлы Lottie являются сериализованными в JSON проектами Adobe After Effects, по максимуму реализующими все возможности этой программы. С отображением, увы, всё не так радужно. Хотя готовых «официальных» реализаций библиотеки для рендеринга Lottie и много, как раз под покрываемые Telegram платформы: Android, iOS, Qt и Web — лишь часть из возможностей формата реализована во всех из них. В Telegram пошли ещё дальше и ограничили перечень поддерживаемых возможностей, а также «придумали» свой формат, который отличается от обычного Lottie всего лишь упаковкой в GZip и параметром "tgs": 1 . Кажется, я знаю, где сейчас работает Денис Попов! :-)
И если с документацией на библиотеки для разных платформ всё довольно неплохо, то найти хоть какое-то описание устройства формата, увы, не удалось — только JSON-схему в исходниках lottie-web. Пришлось попутно ковыряться в существующих анимациях, дабы понять общие концепции формата. Также обнаружились расхождения реальных файлов со схемой: в частности, в слоях типа 4, согласно схеме, вложенные объекты хранятся в свойстве "it" — однако в реальных файлах ключ называется "shapes" , а "it" не работает.
Выясненные нюансы формата:
- Файл состоит из слоёв. В отличие от GIF, здесь у каждого слоя может быть произвольное время начала и конца отображения. К слою можно (точнее, нужно) применять различные трансформации: масштабирование, повороты, изменение прозрачности и т.д. Слои могут быть даже трёхмерными (запрещено для Telegram).
- Слой состоит из «фигур» (shapes). Типов у них много, некоторе нельзя использовать в Telegram. На практике, чтобы слой отобразился, он должен включать три фигуры: контур (в готовых анимациях это обычно тип "sh" — кривые Безье; конвертер пока использует только тип "rc" — прямоугольники), заливка (тип "fl" ) и трансформация (тип "tr" ).
- Можно даже включать растровые элементы, создавать текстовые слои, устанавливать взаимосвязи параметров слоёв и фигур через выражения. Вся эта вкуснотища также запрещена в Telegram.
Казалось бы, это и не проблема вовсе? Даже простенький GZip неплохо справляется со сжатием вопиюще повторяющихся данных, и 1 МБ сырого JSON магическим образом превращается в пару десятков килобайт, которые спокойно пролезают в заявленное ограничение в 64 кБ. Не тут-то было!
Загружаю я, значит, пухленькую анимацию, которая спокойно отображается lottie-web, в Telegram — и тут вместо условно красивого пиксель-арта на меня смотрит статическое размазанное вот это:
Что такое?! А оказалось, на разжатые данные тоже есть явно не указанное ограничение в 1 МБ. Представитель команды Telegram оперативно подтвердил его и сообщил о грядущем поднятии лимита до 2 МБ.
Даже если эти проблемы решат — стикеры, выходящие за пределы 1 МБ несжатых данных и не содержащие трансформаций, окажутся недоступными для пользователей старых версий Telegram. Так что придётся, видимо, соблюдать ограничения и впредь.
Прозрачность — это важно
Pillow, наряду с OpenCV, можно назвать индустриальным стандартом для обработки изображений в Python. Мало того, он неплохо заточен и под особенности GIF: поддерживает индексированные цвета, даёт доступ к палитре. Поддерживает преобразование пиксельной карты в NumPy-массив, что важно для продуктивной обработки. Даже статистику по цветам собирает! Но обнаружились и минусы:
- Не нашлось задокументированного способа получить индекс прозрачного цвета. Пришлось в качестве временного решения подразумевать, что прозрачный цвет — самый распространённый, но в реальных GIF'ках это не всегда так.
- То же самое с задержкой между кадрами: Pillow отдаёт только сами кадры как последовательность изображений, без информации о задержках.
- Иногда некорректно накладываются частичные кадры.
Проблему с частичными кадрами решить оказалось нетривиально. gif2numpy пытается накладывать такие кадры на предыдущий, однако не проверяет параметры наложения, из-за чего также не всегда выходит правильный результат. Дабы не возиться с флагами, добавлена предварительная обработка изображений с помощью gifsicle с ключом --unoptimize — он преобразует частичные кадры в полные. А заодно приводит их к использованию глобальной палитры, что устранило необходимость отдельным образом обрабатывать прозрачный цвет при использовании собственной палитры кадра.
Сожми меня сильнее
Квадратики — это хорошо, но с такими ограничениями нужно проявить больше фантазии, иначе в Telegram не «пролезают» даже миниатюрные GIF'ки.
Далее — черёд эксплуатации особенностей Lottie. Поскольку каждый слой имеет произвольное время начала и конца — можно применить технику, которая давным-давно используется видеокодеками, и отчасти в самом GIF: квадратики, которые остаются на одном месте в течение нескольких кадров, можно слить в один слой, во время отображения которого сменяется несколько других. Что и реализовано, пока только для пар соседних слоёв.
Планы по развитию
Идей, которые здесь можно применить, навалом:
- Распознавать одноцветные области любого размера. Можно разбивать их на набор прямоугольников, для чего есть неплохой алгоритм. Также целесообразно преобразовывать их в контур, но это омрачается необходимостью указывать все точки кривых Безье в Lottie — прямоугольниками в некоторых случаях может быть выгоднее.
- Распознавать движение. Техника, опять-таки, издревле применяющаяся в видеокодеках. Если один и тот же контур не меняет форму от кадра к кадру, но лишь координаты — стоит вместо дублирования на нескольких слоях поместить его на один слой с трансформацией.
- Распознавать «накрытие» одних областей другими. Пример:
Читайте также: