脈打つ円
中心を基準に拡大縮小するアニメーション。4つのベジェ点からなる単純な閉じたパスで、変形に関する問題を切り分けられます。
512 × 512 · 60 FPS · 2 秒 · 394 バイト
SVG / TGS / JSON
Telegram向けSVG・TGSサンプル：ソースファイルを無料ダウンロード
まずは動作を理解しやすい小さなファイルから始めましょう。学習用に作成した3つのサンプルは、脈打つ円、動く矢印、静止したチェックマークです。それぞれに元のSVG、TGSファイル、その非圧縮版Lottie JSONが含まれています。
カードに表示されるのは静止した元のSVGです。動きはTGSとJSONに保存されており、SVGには組み込まれていません。これらはプログラムで作成した学習用サンプルで、ユーザーがアップロードしたファイルから取得したものではありません。
動く矢印
図形を回転させず、位置だけを変えるアニメーション。元の図形には、縦方向に56ピクセル動くための十分な余白があります。
512 × 512 · 60 FPS · 2 秒 · 381 バイト
静止したチェックマーク
丸い線端を持つ開いたパスで、動きはありません。線の太さを比較し、静止したTGSとPNGの違いを確認するために使えます。
512 × 512 · 60 FPS · 3 秒 · 342 バイト
サンプルの使い方
- SVGをダウンロードし、ベクター編集ソフトで開きます。図形は1つだけで、埋め込み写真や、文字として編集できるテキストオブジェクトは含まれていません。
- コンバーターを開き、SVGを選んでTelegramでログインします。ファイルを選択すると診断用のコピーがサービスに送信されます。これらのサンプルにも同じ処理が適用されます。
- 動きまたは静止モードを選び、プレビューを確認してTGSを書き出します。コンバーターのプリセットは、ここで提供する学習用TGSとタイミングや動きが異なる場合があります。
- 書き出したファイルとサンプルのキャンバスサイズ、fr、op、layers、アニメーションするプロパティを比較します。その後、Telegramの@Stickersでファイルを確認します。
確認済みの項目
プロジェクトの検証ツールは、gzip、JSON、512 × 512のキャンバス、60 FPS、3秒以内の長さ、64 KB未満の圧縮後のサイズ、対応する図形データを確認します。各サンプルは外部画像を含まない1つのレイヤーで構成され、アニメーションする値の最初と最後が一致しています。これは構造の検証であり、各ファイルがTelegramのサーバーに受け入れられたことの確認ではありません。
JSONで確認する項目
frはフレームレートを設定し、opはコンポジションの終了位置を示し、layersにはレイヤーが列挙されます。円はks.sでスケールを、矢印はks.pで位置をアニメーションさせています。チェックマークは開いたパスで、cはfalseになっており、st項目が線を定義しています。aが0のプロパティにはキーフレームがありません。
自分の制作に再利用できます
この3つのサンプルはSVG to TGSチームが作成しました。複製、変更、再配布が可能で、商用プロジェクトでも利用できます。料金やクレジット表記は必要ありません。この許可は3組のサンプルファイルのみに適用され、サイトのソースコード、ロゴ、第三者の作品は含まれません。
元のファイルを保管してください
コンバーターが受け付けるのは元のSVGです。ここでダウンロードできるTGSとJSONは、構造の確認や比較のためのもので、コンバーターに再読み込みすることはできません。後で編集できるよう、SVGは別に保管してください。複雑なロゴを試す前に、簡単なサンプルで同じ手順を最後まで実行できるか、お使いの端末で確認しましょう。