Как сделать двигающиеся Смайлики в Телеграмме

А теперь о подробностях реализации.

Всё началось с дискуссии в чатике 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-массив, что важно для продуктивной обработки. Даже статистику по цветам собирает! Но обнаружились и минусы:

1. Не нашлось задокументированного способа получить индекс прозрачного цвета. Пришлось в качестве временного решения подразумевать, что прозрачный цвет — самый распространённый, но в реальных GIF’ках это не всегда так.
2. То же самое с задержкой между кадрами: Pillow отдаёт только сами кадры как последовательность изображений, без информации о задержках.
3. Иногда некорректно накладываются частичные кадры.

Прозрачность, как оказалось, gif2numpy не поддерживает вообще: цвета сразу преобразуются в три канала с разрядностью в байт, без учёта разрядности и сохранения индексов цветов. Благо, модуль состоит из одного файла, так что не составило труда включить его в проект и доработать, зарезервировав под прозрачность цвет #FE00FE .

Проблему с частичными кадрами решить оказалось нетривиально. gif2numpy пытается накладывать такие кадры на предыдущий, однако не проверяет параметры наложения, из-за чего также не всегда выходит правильный результат. Дабы не возиться с флагами, добавлена предварительная обработка изображений с помощью gifsicle с ключом —unoptimize — он преобразует частичные кадры в полные. А заодно приводит их к использованию глобальной палитры, что устранило необходимость отдельным образом обрабатывать прозрачный цвет при использовании собственной палитры кадра.

Сожми меня сильнее

Квадратики — это хорошо, но с такими ограничениями нужно проявить больше фантазии, иначе в Telegram не «пролезают» даже миниатюрные GIF’ки.

Первым в ход пошло нечто похоже на RLE : соседние по горизонтали квадратики одного цвета объединяются в один прямоугольник.

Далее — черёд эксплуатации особенностей Lottie. Поскольку каждый слой имеет произвольное время начала и конца — можно применить технику, которая давным-давно используется видеокодеками, и отчасти в самом GIF: квадратики, которые остаются на одном месте в течение нескольких кадров, можно слить в один слой, во время отображения которого сменяется несколько других. Что и реализовано, пока только для пар соседних слоёв.

Планы по развитию

Идей, которые здесь можно применить, навалом:

• Распознавать одноцветные области любого размера. Можно разбивать их на набор прямоугольников, для чего есть неплохой алгоритм. Также целесообразно преобразовывать их в контур, но это омрачается необходимостью указывать все точки кривых Безье в Lottie — прямоугольниками в некоторых случаях может быть выгоднее.
• Распознавать движение. Техника, опять-таки, издревле применяющаяся в видеокодеках. Если один и тот же контур не меняет форму от кадра к кадру, но лишь координаты — стоит вместо дублирования на нескольких слоях поместить его на один слой с трансформацией.
• Распознавать «накрытие» одних областей другими. Пример:

. .O..O. . .OOOO. .

Ссылки

• Исходники. Местами страшные.
• Канал, на котором я выкладываю паки успешно сконвертированных GIF’ок.

Источник: habr.com

Какие стикеры в телеграмме анимированные по нажатию

Telegram ввел интерактивные , и ❤️

Интерактивные эмодзи получили пользователи Telegram в очередном обновлении мессенджера, сообщается в блоге компании.

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

Пока специальные эффекты доступны для шести эмодзи: , , , , и ❤️, однако разработчики обещают расширять этот набор.

Кроме того, в мессенджере появились и некоторые другие новые функции. Например, теперь для небольших групповых чатов доступен полный список тех, кто прочитал отправленное сообщение. Если раньше сообщение помечалось как прочитанное, если хотя бы один участник чата его прочитал, то теперь можно будет посмотреть полный список тех, кто уже увидел сообщение. Эта информация будет храниться неделю после отправки.

Кроме того, теперь в мессенджере можно записывать видеочаты, а не только их звук, как было возможно ранее. При организации видеотрансляции через Telegram администраторы могут разрешить ее запись. После окончания трансляции она сохранится у администратора группы в чате «Избранное».

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

Анимированные смайлики в Телеграме, как ими пользоваться

Какие смайлики в Телеграмме анимированные и как ими пользоваться? В Telegram есть большая коллекция стикеров и смайлов, скачать их можно бесплатно. Отправить живой стикер можно в группу или личный диалог. Разберемся, как включить анимированные смайлики в Телеграмме, как ими пользоваться и где искать.

Есть ли анимированные смайлики в Телеграме

В Телеграмме есть статичные стикеры и смайлики с анимацией. Иконками можно пользоваться во время переписки с друзьями. Они доступны для смартфонов и компьютеров.

Живые смайлы в Телеграме есть и они доступны бесплатно. Скачать их можно во время переписки прямо из чата или добавить через специальное меню. Двигающиеся смайлики в Телеграме есть на Андроиде и на Айфоне. Чем новее установленная версия мессенджера, тем больше доступно пакетов.

Разберемся, как настроить автоматическое проигрывание анимации в переписках, как найти живые стикеры и как пополнить свою коллекцию.

Настройка анимации в чатах

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

Как включить анимацию в беседах и группах Telegram:

1. Откройте настройки мессенджера.
2. Войдите в меню «Настройки чатов».
3. Прокрутите параметры вниз.
4. Включите пункты «Анимация» и «Крупные эмодзи».

Обычно эти опции включены в мессенджере по умолчанию. Смайлики оживают в окне с беседой автоматически и не требуют нажатия. Если заметили, что все наклейки перестали двигаться, проверьте параметры, рассмотренные выше.

Как найти и отправить анимированный смайл в Telegram

Разберемся, как пользоваться анимированными смайлами в Телеграмме. Функция есть на телефонах и на компьютерах. Отправлять можно любое количество наклеек, это бесплатно.

Количество доступных наклеек зависит от версии мессенджера и добавленных вручную пакетов. Сохранять новые смайлы можно во время переписки или через специальное меню.

На телефоне

Как отправить оживленный смайлик в Телеграме на телефоне:

1. Перейдите в диалог.
2. Нажмите на иконку слева от области написания сообщения.
3. Переключитесь в стикеры с помощью клавиши снизу.
4. Откроются наклейки, есть как живые, так и статичные варианты.
5. Выберите нужный пакет с помощью мини-картинки сверху.
6. Тапните по иконке, чтобы вставить ее в чат.

Внимание. После перехода в стикеры, кнопка с нижней части экрана изменится. Постоянно переключаться на живые иконки не придется.

На компьютере

Разберемся, как отправить интерактивный смайлик в Телеграмме на компьютере. Посмотреть список и скинуть наклейку в чат можно в любое время. Действие практически не отличается от версии для смартфона.

Как скинуть смайл, который будет двигаться, в Телеграмме на компьютере:

1. Перейдите в мессенджер и откройте нужный чат.
2. Наведите курсор на рожицу снизу справа.
3. В новом окне щелкните по «Стикеры».
4. Выберите пакет с помощью мини-картинки снизу.
5. Щелкните по нужной иконке, она будет отправлена другу моментально.

Как понять, какие смайлики интерактивные в Телеграмме? Для этого включите нужный пакет и посмотрите на наклейки, они начнут двигаться автоматически. Если движения нет – иконка статичная.

Обратите внимание. Все наборы, добавленные с помощью смартфона, автоматически появляются и на компьютере.

Где можно найти анимированные смайлы в Telegram

Какие смайлы в Телеграмме анимированные и как их добавить в свою коллекцию? Скачать живые стикерпаки можно несколькими способами:

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

Рассмотрим два популярных способа получения стиков. Для этого сохраним наклейки через окно с перепиской и откроем встроенный магазин.

Как сохранить анимированный смайл в Телеграме во время переписки:

1. Откройте чат.
2. Найдите анимированную наклейку.
3. Нажмите на нее.
4. В новом окне появится весь пакет, для сохранения выберите «Добавить».
5. После этого найти стикерпак можно в меню, рассмотренном выше.

Обратите внимание. Если картинка не двигается, значит, она не анимированная.

Как добавить смайликов с анимацией в Телеграме через встроенное меню:

1. Вызовите меню с живыми наклейками в чате.
2. Нажмите на шестеренку.
3. Тапните по пункту «Популярные стикеры».
4. Пролистайте список и сохраните все понравившиеся варианты.

Наборы постоянно обновляются. Список может меняться, это зависит от модели используемого смартфона. В меню также встроен поиск по названию, поддерживаются запросы на русском и английском языке.

Какие смайлики в Телеграмме анимированные и как ими пользоваться, теперь понятно. Живые картинки воспроизводятся автоматически, на них не нужно нажимать в чате. Отключить анимацию смайлов в Телеграме можно через настройки чатов, но зачем это делать.

Внимание. Если в телефоне смайлы не оживают, но все параметры выбраны правильно, попробуйте обновить операционную систему или скачайте последнюю версию мессенджера. Обновлять Телеграм можно бесплатно, это делается вручную или автоматически.

В новой версии Telegram появились видеостикеры и новые интерактивные эмодзи для реакций

Вышел Telegram 8.5. В этом обновлении появилось много косметических нововведений.

В мессенджере упростили навигацию, добавили видеостикеры и многое другое. Разбираемся, что нового.

Видеостикеры

Раньше анимированные стикеры могли создать только пользователи, владеющие техническими знаниями и имеющие специализированные программы. Теперь сделать стикер может каждый из обычных видеозаписей, используя практически любой видеоредактор.

Улучшенные реакции

Анимации при отправке реакций стали компактнее. Чтобы отправить более масштабную, нужно зажать пальцем эмодзи в меню выбора реакций.

Как и интерактивные эмодзи, реакции теперь синхронизируются для отправителя и получателя – анимация запустится одновременно для всех участников беседы.

Новые реакции и интерактивные эмодзи

В этой версии Telegram появилось 5 новых эмодзи в списке доступных реакций – . Их можно использовать и как интерактивные эмодзи. Достаточно отправить один из них отдельным сообщением и нажать на анимированную версию.

Переход к недавно открытым чатам

Теперь можно быстро вернуться к одному из предыдущих чатов, если вы переходили из одного в другой за последние несколько минут. Для этого достаточно зажать кнопку Назад и выбрать необходимую переписку.

Похожие публикации:

1. Где писать программы на паскале
2. Как восстановить подписку в яндекс музыке
3. Как разобрать ноутбук huawei d15
4. Как скопировать сертификат контур с флешки на компьютер

Источник: ifreeapps.ru