• ブログ
  • BLOG
    WEB制作のお話や、実績の紹介
    その他もろもろのお知らせをときどき公開中です。
アニメーションPNGがページ遷移しても再度アニメーションが実行されない問題の解決法(iphone)
2023年9月25日

今回は普段あまり使わない状況で発生した問題ですので
備忘録としてメモをしておきます。

■問題点
アニメーションPNGを既定回数最終フレームで停止
再度アニメーションを表示したいために、リロードや画面遷移を行なっても
最終フレームで停止したままになってしまう。(iphoneの場合)

・通常のWEBで一回だけで停止するアニメーションは
あまりりようせず通常は、最終フレームが長めに停止の永久ループ等ですので
今回のような問題はちょっと色々と躓きました。※しかもiphoneがなかなかめんどくさいです。

■解決にあたって試してみた事
・まず、画像をキャッシュしてしまうとiphoneでは
アニメーションが停止したままになるので
キャッシュ自体を無効にする設定をする。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

これでキャッシュが効かないのでリロードするたびに 再読み込みがかかるはず!!!
と思いましたがバッチリキャッシュされてしまい
アニメーションが再度実行されません。

・wowスクリプトで画面のスクロールに合わせて画像を表示させてみる。
※1回目以降は再生終了した物が表示されます。

・imgタグにパラメーターを付与して別画像扱いとして読み込み
この方法については初めからネットで色々と情報は出ていたのですが
折角のキャッシュ機能をアニメーションが動かないという理由だけで別画像扱いで読み込むというのは
もったいない気がしたのであまり利用したくなかったのですが
今回は、アニメーションの確認用としての一般公開向けのページでは無かったので
別画像扱いで読み込む方法を試してみました。

■解決策
画像を読み込み時にパラメーター付与して
画像を別画像扱いとして読み込ませます。
「img/画像のデータ.png?※ここにタイムスタンプ※」
Jqueryで行う方法がネットでは出ていましたが
それだけの為にJqueryを読み込ましたくない時もあるので
今回はPHPで行いました。 ※htmlで動作させる場合は 
phpをhtmlで実行できるようにしてください。

元々以下の様にあるIMGタグを


<img src="hoge.png">

こんな感じにすればOKです。

<img src="hoge.png?<?php print(date("YmdHis"));?>">

日付がついてるのってソースを見たらわかっちゃうからなんだか
かっこ悪いな・・・っていう人は RND関数か何かでランダムな数値をいれたら
同一の数字が出ない限りは大丈夫です。(オススメはしません)

■まとめ
しかし、safariでリロードしてもアニメーションが動かないというだけで
キャッシュをさせずに新たにファイルを読み込むというのは
サイト制作する際に利用するのはあまり積極的に利用したくありません。

実際にサイト制作で1回限りの再生 リロードしても再生を必ず起こすというものであれば
TransformのアニメーションをJavascriptで… という形で行うのが良いかもしれませんね。
コマ数が多くなければになりますが…

トップ