連番アニメーションをjQueryで制御する

背景をスプライトシートにすると

200px*200pxが30コマあった場合に

1frame
background-position: 0px 0px;
3frame
background-position: -400px 0px;

みたいにする。

setIntervalとか使って制御って、js使ってる範囲だと若干処理が面倒くさい。

jqueryのanimateは値が滑らかなので、stepで値に四捨五入をかます。

qiita.js

$("#TARGET").animate({zIndex:1},{
      duration:4000,
      step:function(now){
        var counter = Math.round(now*29);
        var retu = 0;
        if(counter > 80-1){//折り返しが発生してる場合はこんな感じ。
          retu = 2;
        }else if(counter > 40-1){
          retu = 1;
        }
        $("#TARGET").css({"background-position":"-"+(200*counter)+"px -"+(200*retu)+"px"})
      },
      //終わったら
      complete:function(){//ここは初期値にしちゃってる。
        $("#TARGET").css({"background-position":"0px 0px"})
      }
    })

こんな感じです。