JavaScriptでクレイアニメ。ちらつきを抑止する方法は？

2014/05/10 05:01

このQ&Aのポイント

JavaScript初心者がWindows７とGoogleChromeを使用してクレイアニメを作成しましたが、画像がちらついてしまいます。画像タイプの問題かと思い、gifファイルも試しましたが改善されませんでした。このちらつきを抑止する方法はあるのでしょうか？
クレイアニメを作成している中で、画像がちらつく現象が起きます。画像の種類に関係なく、チカチカする問題は解決できないでしょうか？ハード的な問題である場合、プログラムで対策することはできないのでしょうか？
クレイアニメを作成している際に、画像がちらつく問題に悩んでいます。時折チカチカすることもあり、常時スムーズに表示される方法はないでしょうか？ネット上でチカチカを強調する方法についてはたくさん見つかりますが、チカチカを抑える方法については情報が少なく困っています。どなたか教えていただけませんか？

JavaScriptでクレイアニメ。ちらつきます。

JavaScript初心者です。Windows７とGoogleChromeを主に使っています。 <!DOCTYPE html> <html><head><title>animation</title> <script src="js/jquery-1.11.0.min.js"></script> <style> #area{ width:420px;height:320px;text-align:center;background:gray; } </style> </head> <body> <div id="area"><br><img src='slideshow/photo0.jpg'></div> <button id="move">PLAY</button> <script> time=200;lastcode=10; count=0; $("#move").mouseover(function(){ anime=setInterval(nextfilm,time); }) .mouseout(function(){ clearInterval(anime); }); nextfilm=function() { if(count==lastcode)count=0 else{count++;} ; // count=(count==lastcode)? 0 : count+1; bufa="<br><img src='slideshow/photo"+count+".jpg'>"; $("#area").html(bufa); } </script> </body> </html> slideshowフォルダにphoto0～10.jpg（400×300px）という画像を用意し、カーソルをPLAYボタンに乗せると0.2秒間隔で次々に画像を見せるクレイアニメ及びスライドショー再生プログラムをごくシンプルに作ってみました。実行してみると、けっこうチカチカします。画像タイプの問題かなとも思いアニメーションによく使われるgifファイルも作って試しましたが、変わりません。よく見たら、同じ画像をgifにしたらデータ量が倍以上あるんですね。このちらつき現象、時折チカチカせずスムーズになることもあり、常時スムーズだといいのにと思うのですが、ではこれはハード的な問題でプログラムで抑止することは不可能ということでしょうか？抑止できるとしたらどんな書き方があるのでしょうか？チカチカさせる効果の紹介はネット上でも多いのですが、逆にチカチカしてしまうのを抑えたいとなると参考にできるページに行き当たらず、ここで質問に思い立った次第です。どなたかご教示お願いします。

zchess
お礼率92% (86/93)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#202910

2014/05/10 09:26 回答No.2

画像のロード時間のせいみたいなので、最初に　.hide { display:none}のようなcssを定義。　photo0～phpto10まで、全てのimgタグを作り、class=hide をつける。としておき、setIntervalの中で、　#area > img にeach()でhideをつける。　見せたい１つのimgだけはhideを外す。としてはどうでしょうか。

質問者

お礼 2014/05/10 21:48

画像ロード時間に問題ありというご意見を参考に .hide{ position:absolute;left:10px;top:10px; }画像全部の配置場所を固定して <p><img class="hide" src=～～></p>とタグを画像分だけ#area中に設けて $("#area p").each(function(){$(this).hide();}); $("#area p:first").show(); スクリプト初期設定時点でｊQueryで画像消去と最初の画像表示を行い $("#area p").each(function(){$(this).hide();}); $("#area p:eq("+count+")").show(); setInterval側の画像差し替え動作をこうしてみたところ、成功しました。すっきりしました。ありがとうございました。ちなみに、画像読み込み場所を１箇所に重ねずページに読み込み（{display:none;}にしておく）、$("#area").html()←にimgタグを送り込むやり方も試してみましたが、これも画像読み込みを済ませてあるのに、最初と大差ないちらつくアニメでした。画像ロードを先に済ませれば大丈夫と思ったら、そうもいかないものですね。