ループの設定をしているGIFをブログに載せたときに、ループごとの切れ目がわからずに、どの画像が最初で、どの画像が最後なのかわかりにくくなることがありました。この記事では私が見つけた、ループが1回終わるごとに”一時停止”する方法を解説します。
事前準備
これから解説する”一時停止”するGIFを作る事前準備として、GIFの素になる画像ファイルが用意する必要があります。”一時停止”するにはこの画像ファイルに対する操作が必要になるからです。
もし、GIFの素画像がない場合は以下のいずれかの方法でGIFの素画像を用意しましょう。素画像がある方は、”一時停止”するGIFの作り方に飛んでください。
webアプリでGIFを画像に分解する
webアプリを使って、GIFを一連の画像に変換します。ここではGIF frame extractorを使います。
上記リンクをクリックして画面を表示したら、①GIFファイルを選択し、②UploadボタンをクリックしてGIFをアップロードします。
アップロードが終了したら、③Split to frames!のボタンをクリックして、GIFを画像（フレーム）に分解します。
最後に、④Download frames as ZIPボタンをクリックして、分解された画像をダウンロードします。
ダウンロードしたファイルはzip形式になっているので、適当なソフトで解凍してください。ちなみに私は7-zipを使っています。
ImageMagickでGIFを画像に分解する
ImageMagickをインストールされている方は、以下のコマンドでGIFを画像に分解することが出来ます。src.gifには分解したいGIFファイル名を、target.pngには分解後の画像の名前を指定します。例えばtarget.pngとすると、target-1.png,target-2.png…という名前で分解後の画像が出力されます。
convert src.gif target.png“一時停止”するGIFの作り方
GIFをループ時に”一時停止”させるには、最終フレーム画像を複数コピーします。例えば、t1.png,t2.png,t3.pngの画像ファイルをから、ループするGIFを作る際に、t3.pngをコピーして、t4.png,t5.pngを用意し、t1~t5でGIFを作ります。こうすることで、t3の画像が表示された後、実際はアニメーションが動いていますが、t4,t5がt3と同じ画像なので、”一時停止”しているように見えます。
webアプリで”一時停止”するGIFを作る
webアプリを使って、”一時停止”するGIFを作ります。ここでは、Animated GIF Makerというサイトを使用します。
上記URLをクリックして、画面を表示したらGIFにしたい①画像を選択します。最終フレームの画像を複数指定することで”一時停止”GIFを作ることが出来ますので、適宜選択してください。私は最終フレーム画像を3枚指定しました。
画像を選択したら、②Upload and make a GIF!をクリックします。
画像をアップロードしたら、③GIFのフレーム間隔を入力して、④Make a GIF!をクリックしてGIFを作成します。
最後に⑤Saveをクリックして、作成した”一時停止”するGIFをダウンロードします。
ImageMagickで”一時停止”するGIFを作る
私は5枚の画像から構成された、以下のGIFを一時停止するようにします。以下のGIFではやはり開始、終了がわかりにくいですね。
最終フレームの画像を3枚コピーして、以下”一時停止”するGIF画像を作りました。こうすると開始、終了がわかりやすいですね。
ImageMagickで無限ループGIF画像を作る場合は以下のコマンドで作ることが出来ます。-delayはフレーム間隔を1/100秒単位で指定します。
convert -delay 500 -loop 0 *.png target.gifまとめ
ループ時にGIFを”一時停止”させるには、最終フレーム画像を複数コピーして、GIFを作成する。
