スプライトシートによるpngアニメーション
$(function(){ var id = "chara"; // ターゲット var width = 20; // 1コマの幅 var height = 34; // 1コマの高さ var fps = 15; var frame = 0; var max_frame = 4; // 総コマ数 var onceFlg = false; var interval = 1/fps*1000; animation = setInterval(intervalEvent, interval); function intervalEvent(){ $("#"+id).css({ "background-position-x" : -width * frame +"px" // 1コマづつ右にずらしていく }); frame++; if(frame>=max_frame){ if(onceFlg) clearInterval( animation ); frame = 0; }; }; });
1コマづつ横に並べた、横長スプライトシートの場合の例です。
縦に並べた画像の場合は15行目を編集する必要があるので注意。