Pulsujące koło
Animacja skali wokół środka. Prosta zamknięta ścieżka z czterema punktami Béziera pomaga wyodrębnić problemy z przekształceniami.
512 × 512 · 60 FPS · 2 s · 394 bajtów
SVG / TGS / JSON
Przykładowe pliki SVG i TGS do Telegrama: pobierz źródła za darmo
Zacznij od małego pliku, którego działanie łatwo zrozumieć. Te trzy przykłady przygotowane do nauki przedstawiają pulsujące koło, poruszającą się strzałkę i nieruchomy znacznik wyboru. Każdy zawiera źródłowy SVG, plik TGS i jego nieskompresowany Lottie JSON.
Karty przedstawiają nieruchomą grafikę źródłową SVG. Ruch jest zapisany w TGS i JSON, a nie osadzony w SVG. To przykłady edukacyjne utworzone programowo, a nie pliki pochodzące od użytkowników.
Poruszająca się strzałka
Animacja położenia bez obracania kształtu. W źródle pozostawiono wystarczająco dużo miejsca na ruch w pionie o 56 pikseli.
512 × 512 · 60 FPS · 2 s · 381 bajtów
Nieruchomy znacznik wyboru
Otwarta ścieżka z zaokrąglonym obrysem, bez ruchu. Porównaj na niej grubość linii i zobacz, czym nieruchomy TGS różni się od PNG.
512 × 512 · 60 FPS · 3 s · 342 bajtów
Jak korzystać z przykładów
- Pobierz SVG i otwórz go w edytorze grafiki wektorowej. Zawiera jeden kształt, bez osadzonych zdjęć i edytowalnego tekstu.
- Otwórz konwerter, wybierz SVG i zaloguj się przez Telegram. Wybranie pliku powoduje wysłanie jego kopii diagnostycznej do usługi; dotyczy to również tych przykładów.
- Wybierz animację lub tryb statyczny, sprawdź podgląd i wyeksportuj TGS. Preset konwertera może mieć inne tempo i ruch niż udostępniony tutaj edukacyjny plik TGS.
- Porównaj swój eksport z przykładem: rozmiar płótna, fr, op, layers i animowane właściwości. Następnie sprawdź plik w Telegramie za pomocą @Stickers.
Co sprawdzono
Walidator projektu sprawdza gzip, JSON, płótno 512 × 512, 60 FPS, czas trwania nieprzekraczający 3 sekund, rozmiar po kompresji poniżej 64 KB oraz obsługiwane dane kształtów. Każdy przykład ma jedną warstwę bez zewnętrznych obrazów; pierwsza i ostatnia wartość animacji są takie same. Jest to sprawdzenie struktury, a nie potwierdzenie przyjęcia każdego pliku przez serwery Telegrama.
Co sprawdzić w JSON
Pole fr określa liczbę klatek na sekundę, op oznacza koniec kompozycji, a layers zawiera listę warstw. Koło animuje skalę w ks.s, a strzałka — położenie w ks.p. Znacznik wyboru ma otwartą ścieżkę, z c ustawionym na false, oraz obrys zdefiniowany elementem st. Wartość a równa zero oznacza właściwość bez klatek kluczowych.
Wykorzystaj je we własnych projektach
Te trzy przykłady zostały stworzone przez zespół SVG to TGS. Możesz je kopiować, modyfikować i rozpowszechniać, również w projektach komercyjnych, bez opłat i obowiązku podawania autora. Zgoda dotyczy wyłącznie tych trzech zestawów plików; nie obejmuje kodu źródłowego witryny, logo ani prac osób trzecich.
Warunki korzystania z przykładów
Zachowaj plik źródłowy
Konwerter przyjmuje źródłowy SVG. Dostępne tutaj pliki TGS i JSON służą do analizy i porównania; konwerter nie może ich ponownie importować. Zachowaj SVG osobno do późniejszej edycji. Zanim przetestujesz złożone logo, upewnij się, że prosty przykład przechodzi ten sam proces na Twoim urządzeniu.
Poradniki dotyczące przygotowania SVG i rozwiązywania problemów