SVG to TGS Анимация стикеров Telegram
Русский

создать анимированный стикер telegram

Конструктор анимированных стикеров Telegram

Разберите одно понятное движение на примере пульсирующего круга, затем анимируйте свой SVG и проверьте экспортированный TGS.

Анимировать свой SVG

Конвертация и скачивание бесплатны после входа через Telegram; дополнительные пресеты доступны в Pro.

Анимировать свой SVG Статичный векторный SVG. Встроенные изображения и живой текст не экспортируются как редактируемые слои.
Анимировать свой SVG
Редактор в браузере Векторный SVG на входеПредпросмотр перед экспортомСкачивание TGS

Разбор на исходном файле

Масштаб меняется, центр остаётся на месте

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

Масштаб меняется, центр остаётся на месте — Кадр 0
Кадр 0
Масштаб меняется, центр остаётся на месте — Кадр 60
Кадр 60
Масштаб меняется, центр остаётся на месте — Кадр 119
Кадр 119
Холст
512 × 512
Временная шкала
2 с · 60 кадров/с
Размер TGS
394 байт
Масштаб
85% → 100% → 85%
Центр
256, 256

  1. Разделите размер и положение

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

  2. Сопоставьте три значения масштаба

    На кадрах 0, 60 и 119 заданы масштабы 85%, 100% и снова 85%. Полный размер контура по ширине — 216 пикселей, уменьшенный — 183,6. Исходный SVG показывает круг полного размера, поэтому его нельзя считать изображением первого кадра анимации.

  3. Проверьте возвращение к началу

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

Эта анимация создана программно для обучения, а не экспортирована конкретным пресетом редактора. Экспорт из редактора может отличаться. Проверка структуры не гарантирует приём файла Telegram.

Один круг и одно анимированное свойство

В учебном pulse-circle синий круг остаётся в точке (256, 256) на холсте 512 × 512. Положение и поворот не меняются. По горизонтали и вертикали анимируется только масштаб: 85% → 100% → 85%. Так легко увидеть действие одного свойства.

При полном масштабе радиус круга равен 108 единицам. Видимый диаметр меняется от 183,6 до 216, а центр остаётся на месте. Если ваша пульсация смещается в сторону, проверьте опорную точку и положение, прежде чем менять длительность.

Как устроены две секунды движения

В JSON указаны 60 FPS и композиция на 120 кадров: это две секунды. Последний ключ масштаба находится на кадре 119, незадолго до конца композиции. Это параметры готового образца, а не обещание точных числовых настроек пресета редактора.

  • Кадр 0: масштаб по X и Y составляет 85%.
  • Кадр 60: круг достигает 100%.
  • Кадр 119: масштаб возвращается к 85%.
  • Положение (256, 256) сохраняется на протяжении всего цикла.
  • Несколько повторов помогают оценить переход от конца к началу.

Изучите образец и сделайте свою версию

Файлы pulse-circle.tgs размером 394 байта и читаемый JSON созданы программно для обучения. SVG содержит неподвижный круг, а движение записано в TGS и JSON. Редактор не импортирует эти TGS или JSON обратно.

Загрузите SVG и попробуйте доступный пресет пульсации. У него собственные значения масштаба и ритм, поэтому экспорт не обязан совпадать с образцом по кадрам или размеру файла. Сравните устойчивость центра, характер движения и читаемость.

Как это работает

Как сделать и оценить простую анимацию

Разберите одно понятное движение на примере пульсирующего круга, затем анимируйте свой SVG и проверьте экспортированный TGS.

  1. Начните с одной формы

    Скачайте SVG круга или выберите простой символ. Во время первого опыта не меняйте одновременно рисунок и движение.

  2. Загрузите SVG и войдите через Telegram

    При выборе исходника сервис получает его диагностическую копию. Анимация и создание TGS выполняются в браузере.

  3. Выберите доступный пресет

    Попробуйте пульсацию и оцените настоящий предпросмотр. Настройте доступные параметры для своего рисунка: ключи из учебного JSON не импортируются.

  4. Проверьте центр и повтор

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

  5. Экспортируйте и проверьте файл

    Скачайте TGS, откройте его в проверке файлов и отдельно оцените движение. Затем проверьте стикер в Telegram перед добавлением в набор.

Сценарии

Где подходит этот workflow

Готовьте векторную графику для стикеров, кастомных эмодзи и брендовых наборов Telegram.

Символ подтверждения

Небольшое изменение размера привлекает внимание к одной узнаваемой форме.

Логотип с неподвижным центром

Изучите пульсацию без перемещения логотипа по холсту.

Общий ритм набора

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

Формат

Одинаковый размер на концах ещё не гарантирует плавный цикл

Форма может вернуться к исходному размеру, но повтор всё равно будет казаться резким из-за изменения скорости на границе. Смотрите переход от конца к началу, а не только самый большой и маленький кадры. У круга остальные свойства неподвижны, поэтому сравнение проще.

Проверка TGS измеряет параметры файла и ищет структурные проблемы. Она не отрисовывает все кадры и не подтверждает плавность цикла, отсутствие обрезания или принятие Telegram. Для этого нужны визуальный просмотр и проверка конечного файла в Telegram.

Советы и требования

Как сделать первый результат понятным для проверки

  • Меняйте один параметр движения за раз и сравнивайте несколько полных циклов.
  • Проверяйте форму в самом маленьком размере, а не только на максимальном масштабе.
  • Оставляйте запас вокруг самого большого состояния, включая толщину обводки.
  • Храните исходный SVG вместе с готовым TGS: конвертер не открывает TGS как редактируемый проект.

Пример SVG и готового TGS

Скачайте SVG для проверки конвертера или посмотрите небольшой пример анимированного TGS.

FAQ

Частые вопросы

Почему пример длится ровно две секунды?

Композиция начинается на кадре 0 и заканчивается перед кадром 120 при 60 FPS: 120 ÷ 60 = 2 секунды. Последний ключ масштаба стоит на кадре 119, примерно на 1,983 секунды.

Пресет повторит масштаб 85% → 100% → 85%?

Нет. Эти значения относятся к программному учебному файлу. У пресета пульсации собственная последовательность масштаба и времени, поэтому смотрите его предпросмотр и свой экспорт.

Можно загрузить JSON круга для редактирования?

Нет. Загружайте исходный SVG. JSON предназначен для изучения структуры, а готовый TGS можно открыть в отдельной проверке файлов.

Нужен After Effects для такой анимации?

Для простого движения из SVG достаточно пресетов и экспорта редактора после входа через Telegram. Дополнительные пресеты и связанные инструменты Telegram доступны в Pro.

Результат проверки файла гарантирует плавный повтор?

Нет. Проверка структуры не оценивает визуальное движение. Посмотрите готовый TGS несколько раз, особенно переход между циклами.

Начать

Добавьте одной форме понятное движение

Войдите через Telegram, попробуйте пресет и оцените полный цикл перед скачиванием TGS.

Анимировать свой SVG