- ベストアンサー
複数のjquery pngアニメを同ページ内に配置する際の問題と解決方法
- 複数のjquery pngアニメを同ページ内に配置する際に問題が発生しています。アニメーション1が23×23個表示され、アニメーション2が表示されません。解決方法としては、アニメーション1とアニメーション2の間に適切な文言が記載されていない可能性があります。また、javascriptの記述が重複しているため、変数や関数名を一意にする必要があります。
- 同じページ内に複数の異なるjquery pngアニメーションを配置すると、うまく表示できない問題が発生しています。アニメーション1が正しく表示されず、アニメーション2も表示されなくなります。解決方法としては、各アニメーションの変数や関数名を一意にする必要があります。また、アニメーションの順序を正しく配置する必要もあります。
- 複数のjquery pngアニメーションを同ページ内に配置する際に問題が発生しています。アニメーション1が23×23個表示され、アニメーション2が表示されません。解決方法としては、各アニメーションのidや変数名が重複しているため、一意にする必要があります。また、アニメーションの順序を正しく配置する必要もあります。
- pencil87
- お礼率88% (16/18)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
無駄なローカル変数を整理しました。 ===================== javascript ===================== <script type="text/javascript"> $(function(){ /* 関数定義 */ var animeSprite = function ( $id, $fps, $src, $max, $flg ) { var w = $($id).width(); var h = $($id).height(); var frame = 0; $($id).css({ "width": w, "height": h, "background-image": "url('"+$src+"')", "background-repeat": "no-repeat" }); var interval = (1/$fps)*1000; var animation = setInterval(function () { $($id).css({ "background-position": "0 " + (-h * frame) + "px" }); frame++; if(frame >= $max){ if($flg) clearInterval( animation ); frame = 0; } }, interval); }; /* 実行 */ animeSprite( "#sprite1", 10, "./img/test1.png", 10, false ); animeSprite( ".sprite2", 5, "./img/test2.png", 5, false ); }); </script>
その他の回答 (3)
- medal
- ベストアンサー率100% (3/3)
値が色々干渉しているんでしょうね。 同じような処理の重複は事故やメモリロスの元なので、ご提示いただいたサイトのスクリプトを関数化してみました。対象要素は、id、class両方に対応しています。 表示サイズはcssから取得しています。また、関数のオプションは以下の通りです。 animeSprite( "動かしたい対象要素", 秒何枚動かすのか, "画像のパス", 最大フレーム数, ループフラグ ); ===================== CSS ===================== <style type="text/css"> #sprite1 ｛ width:50px; height:50px; ｝ .sprite2 ｛ width:500px; height:300px; ｝ </style> ===================== javascript ===================== <script type="text/javascript"> $(function(){ /* 関数定義 */ var animeSprite = function ( $id, $fps, $imgsrc, $max, $flg ){ var w = $($id).width(); var h = $($id).height(); var fps = $fps; var src = $imgsrc; var frame = 0; var max_frame = $max; var loopflg = $flg; $($id).css({ "width": w, "height": h, "background-image": "url('"+src+"')", "background-repeat": "no-repeat" }); var interval = (1/fps)*1000; var animation = setInterval(function (){ $($id).css({ "background-position": "0 " + (-h * frame) + "px" }); frame++; if(frame >= max_frame){ if(loopflg) clearInterval( animation ); frame = 0; } }, interval); }; /* 実行 */ animeSprite( "#sprite1", 10, "./img/test1.png", 10, false ); animeSprite( ".sprite2", 5, "./img/test2.png", 5, false ); }); </script> ===================== HTML ===================== <body> <div id="wrapper"> <div id="sprite1"></div> <div class="sprite2"></div> <!--// #wrapper end //--></div> </body>
お礼
ご回答ありがとうございました。 お礼が遅くなり、申し訳ありません。 やはり書き方がいろいろややこしく書いてしまっていたのですね。 とても参考になりました！
- H240S18B73
- ベストアンサー率65% (190/288)
$(function(){ $('動かしたい対象').animate({"bgpos":フレーム数},{step:function(t){ $(this).css("background-position","0px -"+Math.floor(t).height())+"px"); }) }) 自分で書いといてアレだけどこっちの方が効率良いですね ってか最終的にこうしたんだった、忘れてた ちなみにjqueryのプラグインでbackgroundPositionってのがあって これいれとくとbackgroundPositionパラメータをアニメーションしたりとかすると background-positionが動かせるようになります スプライトアニメーションだけが目的なら正直上記ぐらいのコードなんで 別にプラグインまで入れる事ないかなとも思いますが あ、jqueryの日本語サイトでstepの第一引数が０～1とかいってるけどあれ嘘ですよ アニメーションするパラメータが一つの場合限定かもしれないけど フレーム数に24とか入れれば0～24、結果の数値が入ってきます、 少なくともウチの環境ではいずれもそうでした jqueryの計算の問題だから多分ブラウザによって違うってこともないと思います
お礼
こちらも、ありがとうございます。 とても参考になりました。
- H240S18B73
- ベストアンサー率65% (190/288)
animate()のstep使うといいよ、コードも少なくて済むし stepには第一引数に結果の数値が入ってくるので その数値を利用してスプライトにしてやればいい $(function(){ $('動かしたい対象').animate({"bgpos":画像全体の高さ-ボックスの高さ},{step:function(t){ $(this).css("background-position","0px -"+(t-t%$(this).height())+"px"); }) }) そんなカンジ
お礼
ご回答ありがとうございました。 お礼が遅くなり、申し訳ありません。
お礼
こちらも、ありがとうございます！ 奇麗なソースを書くのって難しいですね。。 参考にさせていただきます。