アニメーションの速さを決める「フレーム間隔」

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アニメに対応していませんね。
0.05秒以下のGIFアニメを表示した場合は
「0.10秒」に変換されてアニメーションをする仕様です。
今、IE でこのページを見ている人は
実際にそのようになっていると思います。

まさに、この仕様こそが
意図しない高速GIFアニメを生み出す原因！

例えば、フレーム間隔0.05秒以下のGIFアニメを作成し
IE で表示チェックをした場合「0.10秒」でアニメーションします。
この見た目に満足してネット上にアップロード。
しかし、このGIFアニメを Firefox で見ると
正しいフレーム間隔で再生されるため高速でアニメーションするのです。

ただし、Firefox などの IE 以外のブラウザも
すべてのフレーム間隔を正しくアニメーションできるわけではなく
「0.02秒」が限界です。
「0.01秒」のものはIEと同様に「0.10秒」へ変換されます。

どのブラウザで見ても同じ速さのアニメーションにするには
GIFアニメのフレーム間隔を0.06秒以上にしましょう。

フレームレートから適切なフレーム間隔を考える

先ほどの表で括弧内に書かれた数値は
フレーム間隔をフレームレートに換算したものです。
これを参考に適切なフレーム間隔を考えてみましょう。

一般的に、動画サイトに上がっている動画は
フレームレートが30fps程度であることがほとんどです。
そのため、GIFアニメのフレーム間隔も
0.03秒まで対応していれば十分ですね。

また、テレビアニメは
8fps（一部12fps）で作成されていると言われます。
色数制限の関係からGIFアニメもイラストでのアニメが多いですから
IE の限界である0.06秒でも大丈夫そうです。

動画をGIFアニメに変換できるソフトがありますが
この場合はフレームレートを下げて
フレーム間隔は0.06秒以上にした方がよいでしょう。
動画の再生速度が大幅にズレるのは大問題ですからね。


以上の内容をまとめると、
特に理由がない限りフレーム間隔は0.06秒以上にしよう！
ということですね。

ちょっとしたことではありますが
GIFアニメを作成する際は
フレーム間隔の設定に気を付けてみて下さいね。




この記事が参考になったという方へ
よろしければ２つのランキングのクリックをお願いします。
管理人がブログ更新を頑張る力になります！
　
このブログの新着情報をRSSで配信しています →