GIFアニメの作成
複数の画像から「アニメーションGIFファイル」(動画)を作成する無料のWebアプリです。
このツールの特徴は元の画像の透明情報をそのままGIFアニメに変換可能です。その他には「プレビュー機能」や「アニメーションの繰り返し回数」や「画像の重ね方」「表示時間」など詳細な設定を行う事が可能です。
読み込めるファイルは「GIF/PNG/JPEG/BMP/ICO」ファイルです。また、GIFアニメを透明にするにはあらかじめ透過画像(GIF or PNG or ICO)が必要です。既存の画像を透過させるには「画像の透明化」(GIF or PNG)をご利用ください。新規に作成する場合は「アイコンエディタ」(ICO)をご利用ください。
このWebアプリケーションは「HTML5」「JavaScript」のみで動作しますので最新のブラウザがあればどなたでもご利用可能です。
画像の各種変換は「あなたのブラウザ」で実行します。ですのでサーバーにファイルをアップロードする事はありませんのでご安心して下さい。
※Android版のお主のGIFアニメ作成も公開。
※GitHubでGIF.js、GIFAnime.jsをオープンソースで公開。
目次
1. 使い方
2. 機能
3. 推奨ブラウザ
4. 動作確認
5. バージョン
6. FAQ
7. その他のWebアプリケーション
8. 運営者のブログ
1. 使い方
データを残したい場合は必ず画像を出力してください。
※左上にある「GIFアニメの作成」のバナーをクリックでも可能です。
1.1 画像ファイルを追加する
ファイルを追加するには画面左上にある「画像の追加」のボタンから追加します。
※画面上にファイルをドロップすることで追加することも可能です。(複数可)
1.2 基本操作
画像のサイズを指定する
「この幅にする」または「サイズを手入力する」のどちらかを選択します。その後にその右側にあるサイズに関する詳細な設定を行います。
[この幅にする]
「幅」は固定値になりますが「高さ」は自動的に縦横比が維持されます。
[サイズを手入力する]
デフォルトの「幅、高さ」は最初に読み込んだ1枚目の画像サイズです。
[縦横比を維持する]はオンにすると「幅」(横幅)または「高さ」(縦幅)のどちらかを入力するとその値から縦横比を計算してもう片方のサイズを自動入力します。
※縦横比による自動設定は表にあるアイテムの一番上の画像サイズを基準とします。
オプション
[繰り返し回数]
アニメーション全体の繰り返し回数です。デフォルトの「0」は無制限に繰り返します。例えば「1」と入力するとアニメーションを1回繰り返します。入力可能な数値は「0から65535」となります。
[元の透明色] ※元の画像に透明色がある場合の設定
この設定は上級者向けで透明色がおかしい時に使用してください。
※通常は変更する必要はありません。
...
GIFファイルの仕様上の問題で「GIF/PNG/ICO」ファイルに元からある透明色を一時的にこのRGB値の色に置き換えます。そして、ファイル出力時にはその色を透明色に変換します。その時にRGB値の色と同じ色は透明色に変換されます。問題がある場合はRGB値を変更してください。
※初期時のR30 G144 B255は「この色」です。
また、GIFファイルには32bitのアルファチャンネルがありませんので「PNG/ICO」ファイルの32bitの半透明(1-254)は不透明(255)に変換されます。半透明(0)は透明となります。
アイテムの順序、削除、重ね方、表示時間
アイテムの表示順序を変更、削除、重ね方、表示時間の設定を行います。
[画像の重ね方]
「画像の重ね方」は別名で「画像の消去方法」とも呼ばれています。
種類 | 内容 |
---|---|
画像を残す | 次回のフレームに画像を残します。 |
画像を残さない | 次回のフレームに画像を残しません。 |
「画像を残す」は次の画像に透明色がある場合に有効となります。「画像を残す」を設定していても、次の画像に透明色が無い場合は「画像を残さない」と同じ効果になります。
次の例は「元の画像3枚とも透明色がある」場合のサンプルです。
[元の画像] | |
---|---|
3枚とも「画像を残す」を設定 | |
3枚とも「画像を残さない」を設定 | ※全ての画像に透明色が無い場合はこちらになります。 |
※画像の枠はわかりやすいように表示してます。
※「透明色あり」「透明色なし」の画像を組み合わせて動画を作成する事も可能です。
※最後のアイテムの「重ね方」は次の画像が無い為どちらを選んでも効果は変わりません。
[表示時間]
表示時間は「1秒=100」でデフォルトの「50」は「0.5秒」となります。(0-65535)
プレビュー
「プレビュー」ボタンを押すと上記の設定のアニメGIFを確認する事ができます。
※「繰り返し回数」が有限(0以外)の場合は再度、「プレビュー」ボタンを押すことによって「繰り返し回数分」のアニメーションが再生されます。
ファイルの出力
「プレビュー」エリアに「ダウンロード」ボタンが表示されますので、そちらからGIFファイルを出力します。出力されたファイルの保存方法は「画像ファイルの保存方法」をご確認ください。
2. 機能
・ 複数の画像を「アニメーションGIF」へ変換する
・ 透明なアニメーションGIFに対応
・ 詳細な設定が可能(繰り返し回数/重ね方/表示時間/表示順序)
・ GIF/PNG/JPEG/TIFF/BMP/ICOファイルの読み込み ※1
※1 BMP/ICOファイルはWindowsでのみ確認しております。その他のOSでは読み込めない場合があります。TIFFファイルはIEまたはEdgeでのみ読み込み可能です。また、ファイルの読み込みはブラウザの標準機能を使用していますので、ブラウザによってはその他の画像ファイルも読み込める場合があります。
3. 推奨ブラウザ
Chrome / FireFoxの最新版
4. 動作確認
・ Internet Explorer 11(32bit/64bit)
・ Microsoft Edge(32bit)
・ Chrome / FireFoxの最新版
※タブレット、スマートフォンは未対応です。
※HTML5に対応していればその他のブラウザも動作すると思います。
5. バージョン
v1.00(2016年4月21日版)
6. FAQ
Q1 アニメGIFの変換に時間がかかります。
GIFアニメに変換するには「LZW圧縮」や「高品質な減色」をブラウザのJavaScriptで行っていますので若干の時間が必要です。その代わりにサーバーに画像ファイルは一切、送信しません。
※LZW圧縮に関しては改良の余地があるのでそのうち、高速化するかも知れません。
Q2 アニメーションの繰り返し回数について
「0」は無限、「1」は1回繰り返します。
問題は「2」以降です。IE/Edge/Chromeでは「2」は2回繰り返し、「3」は3回繰り返しです。FireFoxだけが「2」は1回繰り返し、「3」は2回繰り返しとなります。
このように繰り返し回数に関してはブラウザによって解釈が異なります。このツールでは対処不可能なので、FireFoxの製造元に「不具合!」とメールすれば修正されるかも知れません。
備忘録も兼ねて、技術者向けに問題箇所のGIFファイルの仕様について解説します。
問題は「Application Extensionブロック」とそのブロック内の「Application Data」の「繰り返し回数」の箇所です。標準(IE/Edge/Chrome等)と思われる仕様ですと「Application Extensionブロック」は繰り返し回数が1回の場合は出現しません。また、「Application Data」の「繰り返し回数」には回数をそのまま記述するのではなく「繰り返し回数 - 1」を設定します。無限の繰り返しの場合は「0」のままとなります。
不具合のFireFox側の手法だと「Application Extensionブロック」は常に出現して「Application Data」の「繰り返し回数」にそのまま値が設定されています。
この問題はネット上のGIFファイル(アニメ)の解説に誤りがある為かも知れません。
※2016年4月時点
7. その他のWebアプリケーション
プチラボ
https://www.petitmonte.com/labo/
50種類以上の便利なツールを無料で公開しています。(フリーソフト)
8. 運営者のブログ
プチモンテ
https://www.petitmonte.com/