Pulsierender Kreis
Skalierungsanimation um den Mittelpunkt. Ein einfacher geschlossener Pfad mit vier Bézier-Punkten hilft, Probleme mit Transformationen einzugrenzen.
512 × 512 · 60 FPS · 2 s · 394 Byte
SVG / TGS / JSON
SVG- und TGS-Beispieldateien für Telegram: Quelldateien kostenlos herunterladen
Beginne mit einer kleinen Datei, deren Verhalten leicht nachvollziehbar ist. Diese drei gezielt erstellten Beispiele zeigen einen pulsierenden Kreis, einen bewegten Pfeil und ein unbewegtes Häkchen. Zu jedem gehören die SVG-Quelldatei, eine TGS-Datei und das zugehörige unkomprimierte Lottie JSON.
Die Karten zeigen die statische SVG-Quellgrafik. Die Bewegung ist in TGS und JSON gespeichert, nicht in der SVG-Datei. Dies sind programmatisch erstellte Lernbeispiele, keine Dateien aus Nutzer-Uploads.
Bewegter Pfeil
Positionsanimation ohne Drehung der Form. Die Quelldatei lässt genügend Platz für die vertikale Bewegung um 56 Pixel.
512 × 512 · 60 FPS · 2 s · 381 Byte
Unbewegtes Häkchen
Ein offener Pfad mit abgerundeter Kontur und ohne Bewegung. Vergleiche damit die Konturstärke und unterscheide eine unbewegte TGS-Datei von einer PNG-Datei.
512 × 512 · 60 FPS · 3 s · 342 Byte
So verwendest du die Beispiele
- Lade eine SVG-Datei herunter und öffne sie in einem Vektoreditor. Sie enthält eine einzelne Form ohne eingebettete Fotos oder bearbeitbaren Text.
- Öffne den Konverter, wähle die SVG-Datei aus und melde dich mit Telegram an. Bei der Dateiauswahl wird eine Diagnosekopie an den Dienst gesendet; das gilt auch für diese Beispiele.
- Wähle eine Animation oder den statischen Modus, prüfe die Vorschau und exportiere TGS. Das Preset des Konverters kann andere Zeitabläufe und Bewegungen verwenden als die hier bereitgestellte TGS-Lerndatei.
- Vergleiche deinen Export mit dem Beispiel: Größe der Zeichenfläche, fr, op, layers und animierte Eigenschaften. Prüfe die Datei anschließend in Telegram mit @Stickers.
Was geprüft wurde
Der Validator des Projekts prüft gzip, JSON, eine Zeichenfläche von 512 × 512, 60 FPS, eine Dauer von höchstens 3 Sekunden, eine komprimierte Dateigröße unter 64 KB und unterstützte Formdaten. Jedes Beispiel hat eine Ebene ohne externe Bilder; die ersten und letzten Animationswerte stimmen überein. Dies ist eine Strukturprüfung und keine Bestätigung, dass jede Datei von den Telegram-Servern angenommen wurde.
Was du im JSON untersuchen kannst
Das Feld fr legt die Bildrate fest, op kennzeichnet das Ende der Komposition und layers enthält die Ebenenliste. Beim Kreis wird die Skalierung in ks.s animiert, beim Pfeil die Position in ks.p. Das Häkchen hat einen offenen Pfad, bei dem c auf false gesetzt ist, und eine durch ein st-Element definierte Kontur. Der Wert 0 für a kennzeichnet eine Eigenschaft ohne Schlüsselbilder.
In eigenen Projekten weiterverwenden
Das Team von SVG to TGS hat diese drei Beispiele erstellt. Du darfst sie kostenlos und ohne Pflicht zur Namensnennung kopieren, verändern und weiterverbreiten, auch in kommerziellen Projekten. Diese Erlaubnis gilt nur für diese drei Dateisätze; sie umfasst weder den Quellcode der Website noch das Logo oder Grafiken Dritter.
Nutzungsbedingungen für die Beispiele
Bewahre die Quelldatei auf
Der Konverter nimmt SVG-Quelldateien an. Die hier herunterladbaren TGS- und JSON-Dateien dienen der Untersuchung und dem Vergleich; der Konverter kann sie nicht wieder importieren. Bewahre die SVG-Datei für spätere Bearbeitungen separat auf. Bevor du ein komplexes Logo testest, prüfe, ob ein einfaches Beispiel auf deinem Gerät denselben Ablauf erfolgreich durchläuft.