あなたは大丈夫？高速GIFアニメになってしまう症状
こんにちは、さち です。
インターネットをしていると
アニメーションする画像を見かけることがあると思います。
これはGIF画像の機能の一つで
一般的に「GIFアニメ」と呼ばれています。
しかし、このGIFアニメの画像
ものすごい速さでアニメーションしているものを時々見かけます。
せっかくGIFアニメを作ったのに
意図してない高速なアニメーションになってしまう！？
これでは困ってしまいますよね。
そこで今回は、
GIFアニメを作るときに気をつけておきたい
フレーム間隔（フレームディレイ、ウェイトタイム）について
書いていきたいと思います。
スポンサーリンク
目次
アニメーションの速さを決める「フレーム間隔」
GIFアニメを作る際
アニメーションの速さを決めるのが「フレーム間隔」です。
ディレイタイム、ウェイトタイム などと呼ばれることもあります。
GIFアニメでは、何枚もの画像を次々と表示することで
アニメーションを表現しており
「何秒後に次の画像に切り替えるか」というのが「フレーム間隔」です。
動画を作ったことがある方は
「フレームレート」という言葉をご存知かと思いますが
これと同じような考え方です。
ブラウザが違うとGIFアニメの見え方も違う
GIFアニメが意図せずに
高速でアニメーションしてしまうのは
閲覧環境（使っているウェブブラウザ）の違いが関係しています。
ウェブブラウザといえば
多くの人が使っている Internet Explorer（以下：IE） ですが
実はこの IE こそが高速GIFアニメの原因です。
あなたの作ったGIFアニメは
意図しない速さでアニメーションしていませんか？
IE でしか表示を確認していない人は特に要注意！
フレーム間隔0.05秒以下は危険！
使用できるGIFアニメのフレーム間隔はウェブブラウザによって異なります。
各ウェブブラウザが対応しているフレーム間隔は次の表のとおり。
GIF
フレーム間隔
0.10秒（10fps）
0.09秒（11.11fps）
0.08秒（12.5fps）
0.07秒（14.29fps）
0.06秒（16.67fps）
0.05秒（20fps）
0.04秒（25fps）
0.03秒（33.33fps）
0.02秒（50fps）
0.01秒（100fps）
この通り、IE だけが0.05秒以下のGIFアニメに対応していません。
IE で0.05秒以下のGIFアニメを表示すると「0.10秒」で再生されます。
IE でこのページを見ている人は実際にそうなっていると思います。
【追記】
IE11, Edge は他のブラウザと同様、0.02秒まで表示できます。
まさに、この仕様こそ意図しない高速GIFアニメを生み出す原因！
例えば、フレーム間隔「0.02秒」のGIFアニメを作り IE で表示をチェック。
しかし、IE では本来と異なる「0.10秒」でアニメーションします。
この見た目に満足してネット上にアップロード。
しかし、このGIFアニメを Firefox で見ると「0.02秒」で再生するため
高速（5倍の速さ）でアニメーションしてしまうのです。
ただし、Firefox などの IE 以外のブラウザも
すべてのフレーム間隔を正しくアニメーションできるわけではありません。
「0.02秒」が限界です。
「0.01秒以下」のものは IE と同様に「0.10秒」に変換されます。
どのブラウザで見ても同じ速さでアニメーションさせるには
フレーム間隔を「0.06秒以上」にする必要があります。
フレームレートから適切なフレーム間隔を考える
先程の表のカッコ内に書かれた数値は
フレーム間隔を「フレームレート」に換算したものです。
これを参考に適切なフレーム間隔を考えてみます。
一般的に、動画サイトに上がっている動画は
フレームレートが 30fps 程度であることがほとんど。
そのため、GIFアニメのフレーム間隔も
「0.03秒」まで対応していれば十分ということになります。
また、テレビアニメは 8fps（一部12fps） で作成されています。
GIFアニメは、色数制限（最大256色）の関係で
イラストのアニメーションでの使用が多いですから
IE の限界である「0.06秒」でも大丈夫そうです。
動画をGIFアニメに変換できるソフトもありますが
この場合はフレームレートを下げて
フレーム間隔を0.06秒以上（16.67fps未満）にした方がよいでしょう。
IE の仕様によって再生速度が大幅にズレると
スロー再生みたいになってしまいますからね。
以上の内容をまとめると、
特に理由がない限りフレーム間隔は0.06秒以上にしよう！
ということですね。
ちょっとしたことですが、GIFアニメを作る際は
フレーム間隔に気を付けてみて下さいね。