Коло, що пульсує
Зміна масштабу навколо центра. Простий замкнутий контур із чотирма точками Безьє допомагає окремо перевірити проблеми перетворень.
512 × 512 · 60 FPS · 2 с · 394 байт
SVG / TGS / JSON
Приклади SVG і TGS для Telegram: безкоштовні вихідні файли
Почніть із невеликого файла, поведінку якого легко зрозуміти. Ці три спеціально підготовлені приклади показують коло, що пульсує, рухому стрілку та нерухому позначку. Для кожного є вихідний SVG, файл TGS і його нестиснений Lottie JSON.
На картках показано нерухомий вихідний SVG. Рух зберігається в TGS і JSON, а не в самому SVG. Це навчальні приклади, створені програмно, а не файли із завантажень користувачів.
Рухома стрілка
Анімація положення без обертання фігури. У вихіднику залишено достатньо місця для її вертикального переміщення на 56 пікселів.
512 × 512 · 60 FPS · 2 с · 381 байт
Нерухома позначка
Відкритий контур із заокругленим обведенням без руху. Порівняйте товщину лінії та відмінності між статичним TGS і PNG.
512 × 512 · 60 FPS · 3 с · 342 байт
Як користуватися прикладами
- Завантажте SVG і відкрийте його у векторному редакторі. Він містить одну фігуру без вбудованих фотографій чи текстових об’єктів.
- Відкрийте конвертер, виберіть SVG та увійдіть через Telegram. Після вибору файла його копія надсилається сервісу для діагностики; це стосується і цих прикладів.
- Виберіть рух або статичний режим, перевірте попередній перегляд та експортуйте TGS. Пресет конвертера може відрізнятися за часом і характером руху від навчального TGS, наведеного тут.
- Порівняйте свій експорт із прикладом: розмір полотна, fr, op, layers та анімовані властивості. Потім перевірте файл у Telegram через @Stickers.
Що перевірено
Валідатор проєкту перевіряє gzip, JSON, полотно 512 × 512, частоту 60 FPS, тривалість не більш як 3 секунди, розмір стисненого файла менш як 64 KB і підтримувані дані фігур. Кожен приклад має один шар без зовнішніх зображень; перше й останнє анімовані значення збігаються. Це перевірка структури, а не підтвердження того, що сервери Telegram прийняли кожен файл.
Що перевірити в JSON
Поле fr задає частоту кадрів, op позначає кінець композиції, а layers містить перелік шарів. Коло змінює масштаб у ks.s, а стрілка — положення в ks.p. Позначка має відкритий контур: c дорівнює false, а елемент st задає обведення. Значення 0 у a позначає властивість без ключових кадрів.
Використовуйте у власних проєктах
Ці три приклади створила команда SVG to TGS. Їх можна копіювати, змінювати та поширювати, зокрема в комерційних проєктах, без оплати й обов’язкового зазначення авторства. Дозвіл поширюється лише на ці три набори файлів і не охоплює вихідний код сайту, логотип або роботи третіх осіб.
Зберігайте вихідний файл
Конвертер приймає вихідний SVG. Доступні тут TGS і JSON призначені для вивчення та порівняння; імпортувати їх назад у конвертер не можна. Зберігайте SVG окремо для подальшого редагування. Перш ніж перевіряти складний логотип, переконайтеся, що простий приклад проходить той самий процес на вашому пристрої.