このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:ウィンドウを効率よく操作する方法まとめ (12/09)
  • Windows:スリープ復帰時のパスワード入力をやめる (12/07)
  • Windows:ミス激減!チェックボックスでファイルを複数選択する (12/05)
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    あなたは大丈夫?高速GIFアニメになってしまう症状

    このエントリーをはてなブックマークに追加
    操作画面


    こんにちは、さち です。

    インターネットをしていると
    アニメーションする画像を見かけることがあると思います。
    これはGIF画像の機能の一つで
    一般的に「GIFアニメ」と呼ばれています。

    しかし、このGIFアニメの画像
    ものすごい速さでアニメーションしているものを時々見かけます。
    せっかくGIFアニメを作ったのに
    意図してない高速アニメーションになってしまう!?
    これでは困ってしまいますよね。

    そこで今回は、
    GIFアニメを作るときに気をつけておきたい
    フレーム間隔(フレームディレイ、ウェイトタイム)について
    書いていきたいと思います。

     


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

    GIFアニメを作る際
    アニメーションの速さを決めるのが「フレーム間隔」です。
    ディレイタイム、ウェイトタイム などと呼ばれることもあります。

    GIFアニメでは、何枚もの画像を次々と表示することで
    アニメーションを表現しており
    「何秒後に次の画像に切り替えるか」というのが「フレーム間隔」です。

    動画を作ったことがある方は
    「フレームレート」という言葉をご存知かと思いますが
    これと同じような考え方です。




    ブラウザが違うとGIFアニメの見え方も違う

    GIFアニメが意図せずに
    高速でアニメーションしてしまうのは
    閲覧環境(使っているウェブブラウザ)の違いが関係しています。

    ウェブブラウザといえば
    多くの人が使っている Internet Explorer(以下:IE) ですが
    実はこの IE こそが高速GIFアニメの原因です。

    あなたの作ったGIFアニメは
    意図しない速さでアニメーションしていませんか?
    IE でしか表示を確認していない人は特に要注意!




    フレーム間隔0.05秒以下は危険!

    使用できるGIFアニメのフレーム間隔はウェブブラウザによって異なります。
    各ウェブブラウザが対応しているフレーム間隔は次の表のとおり。

    GIFフレーム間隔Internet ExplorerFirefoxGoogle ChromeSafariOpera
    0.10秒0.10秒(10fps)◯◯◯◯◯
    0.09秒0.09秒(11.11fps)◯◯◯◯◯
    0.08秒0.08秒(12.5fps)◯◯◯◯◯
    0.07秒0.07秒(14.29fps)◯◯◯◯◯
    0.06秒0.06秒(16.67fps)◯◯◯◯◯
    0.05秒0.05秒(20fps)×◯◯◯◯
    0.04秒0.04秒(25fps)×◯◯◯◯
    0.03秒0.03秒(33.33fps)×◯◯◯◯
    0.02秒0.02秒(50fps)×◯◯◯◯
    0.01秒0.01秒(100fps)×××××


    この通り、IE だけが0.05秒以下のGIFアニメに対応していません。
    IE で0.05秒以下のGIFアニメを表示すると「0.10秒」で再生されます。

    IE でこのページを見ている人は実際にそうなっていると思います。

    まさに、この仕様こそ意図しない高速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アニメを作る際は
    フレーム間隔に気を付けてみて下さいね。



    【関連記事】

       → GIFアニメを作成できるフリーソフト








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら


    パソコンの性能も
    関係するのかな?
    Firefox10.0で閲覧していますが回転速度にあまり変化がありません。
    とりあえずウインドウを小さくして個別に画像を表示すれば、設定したフレーム間隔で動いているようです。
    古いパソコンではGIFアニメを多用しているサイトを閲覧した場合、意図した表示にならない場合がありそうです。

    WidowsXP SP3 Celeron 2.00GHz 512MB RAM
    yanyan | 2012/02/01/Wed [EDIT]
    おっしゃるとおりPCのスペックは関係すると思います。
    (処理落ちしているのだと思います)

    私はいまだにPen4ですけど
    このページのGIFアニメをすべて表示すると
    CPUの使用率が50%近くまで上がります。

    短いフレーム間隔はPCに大きな負荷がかかるので
    一定以下は意図的に0.10秒に変換する
    という理由もあるのでしょうね。
    うみの さち | 2012/02/02/Thu [EDIT]



    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2016 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ