2011年7月26日火曜日

ブラウザごとに挙動が違うGIFアニメーション

スポンサーリンク

使おう使おうと思いつつあまり使えてないGIFアニメーション。
主にFireworksのステートで作っていますが、どうも出来上がったGIFアニメーションの挙動がおかしい。
結論から言えば解決してない中途半端な状態ですが、自力解決がむずかしいのでこの時点で記事にしてみます。


GIFアニメーションとは


GIFアニメーションとは、Wikipediaによれば

GIFアニメーション(ジフアニメーション、GIF animation)は、Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーション。アニメーションGIF (animated GIF) ともいう。

とのこと。いわゆるパラパラ漫画の様な表現です。詳細は引用元のWikipediaをどうぞ。

ブラウザごとの挙動の差


このブログのヘッダー横に、試しにGIFアニメーションを背景画像で表示させました。具体的には以下の画像です。




上記の画像はループ再生ですが、ヘッダーに埋め込んだ画像は表示回数を1回にしています。ただ、ブログアクセス時に表示されたりされなかったりしたので、下記のサイトを参考に乱数らしきものを付与しています。


上記のサイトにも既に書かれてはいますが、以下に挙動の違いを挙げてみます。

実験で利用したのはこのブログのヘッダー背景の画像で、再生回数の設定は1回です。
項目は、ブログアクセス時とページ移動時の挙動です。

なお、私の環境下(iMac使用)では以下のように見えますが、他の方の環境でも同じかどうかは分かりません。もし違う場合は教えて頂けると助かります。

Mac&WinのFirefox

ブログアクセス時:1回再生

ページ移動時:1回再生

タブを複数開けると、最初のタブに連動して再生。最初のタブと全て連動している模様。つまり、タブを時間差で開けると、最初のタブのその時点でのアニメーションと同じコマからが他のタブで流れる。
複数タブを開けた状態だと、ページ移動しても再生されない。

MacのChrome

ブログアクセス時:2回再生

ページ移動時:再生されない

タブを複数開けても連動しない。タブが開く度に頭から再生。

MacのSafari

ブログアクセス時:1回再生

ページ移動時:再生されない

タブを複数開けても、最初のタブに連動して再生。

WinのIE8

ブログアクセス時:2回再生

ページ移動時:2回再生

タブを複数開けても連動しない。タブが開く度に頭から再生。

結び


調べてはみましたが、回数やタブの問題は解決できそうにありません。

ループにしてしまえば良いのでしょうが、ループ以外の表現ができないのは困ります。
難しい...。

スポンサーリンク

0 件のコメント :

コメントを投稿