2012.01.27この記事は約4分で読めます。インターネットをしているとアニメーションする画像を見かけることがあると思います。これはGIF画像の機能の一つで一般的に「GIFアニメ」と呼ばれています。このGIFアニメの画像ものすごい速さでアニメーションしているものを時々見かけます。GIFアニメを作ったのに意図してない高速なアニメーションになってしまう!?これでは困ってしまいますよね。そこで今回は、GIFアニメを作るときに気をつけておきたいフレーム間隔(フレームディレイ、ウェイトタイム)について書いていきたいと思います。スポンサーリンク目次アニメーションの速さを決める「フレーム間隔」ブラウザが違うとGIFアニメの見え方も違うフレーム間隔0.05秒以下は危険!フレームレートから適切なフレーム間隔を考えるアニメーションの速さを決める「フレーム間隔」GIFアニメを作る際アニメーションの速さを決めるのが「フレーム間隔」です。呼ばれることもあります。GIFアニメでは、何枚もの画像を次々と表示することでアニメーションを表現しており「何秒後に次の画像に切り替えるか」というのが「フレーム間隔」です。動画を作ったことがある方は「フレームレート」という言葉をご存知かと思いますがこれと同じような考え方です。ブラウザが違うとGIFアニメの見え方も違うGIFアニメが意図せずに高速でアニメーションしてしまうのは閲覧環境(使っているウェブブラウザ)の違いが関係しています。高速GIFアニメの原因です。表示を確認していない人は特に要注意!フレーム間隔0.05秒以下は危険!使用できるGIFアニメのフレーム間隔はウェブブラウザによって異なります。各ウェブブラウザが対応しているフレーム間隔は次の表のとおり。0.05秒以下のGIFアニメに対応していません。0.05秒以下のGIFアニメを表示すると「0.10秒」で再生されます。このページを見ている人は実際にそうなっていると思います。他のブラウザと同様、0.02秒まで表示できます。本来と異なる「0.10秒」でアニメーションします。この見た目に満足してネット上にアップロード。見ると「0.02秒」で再生するため高速(5倍の速さ)でアニメーションしてしまうのです。以外のブラウザもすべてのフレーム間隔を正しくアニメーションできるわけではありません。「0.02秒」が限界です。同様に「0.10秒」に変換されます。どのブラウザで見ても同じ速さでアニメーションさせるにはフレーム間隔を「0.06秒以上」にする必要があります。フレームレートから適切なフレーム間隔を考える先程の表のカッコ内に書かれた数値はフレーム間隔を「フレームレート」に換算したものです。これを参考に適切なフレーム間隔を考えてみます。程度であることがほとんど。そのため、GIFアニメのフレーム間隔も「0.03秒」まで対応していれば十分ということになります。限界である「0.06秒」でも大丈夫そうです。動画をGIFアニメに変換できるソフトもありますがこの場合はフレームレートを下げてフレーム間隔を0.06秒以上(16.67fps未満)にした方がよいでしょう。仕様によって再生速度が大幅にズレるとスロー再生みたいになってしまいますからね。理由がない限りフレーム間隔は0.06秒以上にしよう!ということですね。関係するのかな?Firefox10.0で閲覧していますが回転速度にあまり変化がありません。ウインドウを小さくして個別に画像を表示すれば、設定したフレーム間隔で動いているようです。古いパソコンではGIFアニメを多用しているサイトを閲覧した場合、意図した表示にならない場合がありそうです。:2012年2月2日おっしゃるとおりPCのスペックは関係すると思います。(処理落ちしているのだと思います)私はいまだにPen4ですけどこのページのGIFアニメをすべて表示するとCPUの使用率が50%近くまで上がります。短いフレーム間隔はPCに大きな負荷がかかるので一定以下は意図的に0.10秒に変換するという理由もあるのでしょうね。コメントをキャンセルメールアドレスが公開されることはありません。コメントは承認制です。反映に時間がかかります。記事に直接関係ない個人的な質問・トラブルにはお答えできません。等)など環境とバージョンを書いて下さると助かります。使用していないので質問されてもお答えできません。URLは投稿できません。ご要望・情報提供などはお問い合わせへお願いします。その他コメント等に関する詳細はこちら。ち備忘録と脳内整理を兼ねてブログ書いてます。分かりやすく書くのが目標です。