GIFからPNGフレームへ
アニメーションGIFは、フレームごとに遅延が設けられた256色画像の積み重ね構造を備えています。これらの画像をPNGファイルに分割することで、スプライトシートへの使用やフレーム単位での編集、またはAfter Effects、Blender、ゲームエンジンへのインポートに必要なすべてのフレームが得られます。本ツールはストリームデータをデコードし、frame_001.pngからframe_N.pngまでの各フレームをZIPファイルとして返します。
GIFをフレームに分割する方法
-
1
GIFをアップロードしてください
フレーム数が有限なすべてのアニメーションGIFです。
-
2
デコーダは各フレームを走査します
遅延および処分方法が適切に考慮されているため、透明性が正しく構築されています。
-
3
すべてのフレームはPNG形式で保存されます
先頭にゼロを付けた連番により、ファイルマネージャーでの並び順が保たれます。
-
4
ZIPファイルをダウンロードします
1フレームあたり1つのPNG画像を含む単一のアーカイブです。
出力の表示形式
my-animation.zip
├── frame_001.png
├── frame_002.png
├── frame_003.png
…
└── frame_042.png
番号は1から始まり、先頭にゼロが配置されているため、42フレームのアニメーションもFinder、Explorer、またはls -1で正しく表示されます。
フレームの遅延と処理
GIFフレームには100分の1秒単位の遅延が設定されており、処理方法としては「何もしない」「背景に戻す」「前の状態に戻す」のいずれかがあります。デコーダはこれらのルールに基づいて各フレームをキャンバス上に合成するため、出力されるPNGファイルは部分的な変化データではなく、完全な画像となります。
ソースが透明度付きの「背景に復元」処理を使用している場合、エクスポートされたフレームの一部はほぼ透明状態で表示されることがあります。これは当初の意図です。
PNGフレームの次の配置場所
- スプライトシート:CSS
steps()またはPhaserで使用可能なスプライトシートを作成するために、フレームを水平方向に連結します。 - ビデオ:
-framerateを使用してFFmpegにデータを供給し、MP4またはWebM形式でエクスポートします。 - アニメーションツール:Krita、Procreate、After Effects、またはAsepriteにインポートし、フレームごとに編集できます。
- ドキュメント作成:ヒーロー画像のキーフレームを1つ選択し、残りはアーカイブとして保存します。
よくある質問
はい。すべてのフレームはアルファ値が保持された状態で保存されるため、ロゴやUIアニメーションはどんな背景でも使用可能です。
フル画像です。デコーダはGIFの処理方法を尊重しているため、エクスポートされたPNGファイルにはGIFストリームに保存されているフレームごとの変化量ではなく、合成後の状態が表示されます。
このツールは、各フレームおよびそのミリ秒単位の遅延情報を含むframes.jsonファイルをZIPファイルに保存するため、FFmpegやビデオ編集ソフトで元のタイミングを再現することが可能になります。
いいえ。アップロードされたファイルはZIPファイルとして処理され、その後廃棄されます。
関連ツール
QRコード生成ツール
テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。
GIFメーカー
連番画像や短い動画をアニメーションGIFに変換します。書き出し前にフレームレート、ループ回数、サイズを調整できます。
バーコードジェネレーター
Code 128、EAN-13、UPC、ITF-14 など9種類の一次元バーコードを作成します。データはブラウザ内に残り、SVG または PNG をダウンロードできます。
写真エディター
切り抜き、回転、明るさ、コントラスト、彩度、フィルター、テキスト追加に対応し、JPG・PNG・WebPへ書き出せるブラウザベースの写真エディター。
PNGからSVGへのベクター変換
PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。
ファンタジーマップ作成ツール
再現可能なシード、地形コントロール、視覚スタイルを使って、ブラウザ内で手続き型のファンタジーマップを作成します。実在の地理ではなく、ローカルでSVGまたはPNGの作品をダウンロードできます。