PNGやJPGでアニメーションをしてみる(JQuery利用)

gifアニメすごい好きなんですけど
例えば綺麗に透過させたい時とか、、たまにgifだと使いづらいときありますよね。

そんなときにpngやjpgをアニメーションさせるJQueryのサンプルを作ったので載せておきます。

ご用意いただくのは、アニメの全コマを横につなげた画像(スプライトシート)です。

スクリプトの仕組みとしては、
一定スピードで画像を一こまずつ横にずらしてアニメさせてるように見せるっていうものです。

walk_material

こういうやつです!
※ちなみにこのキャラクターは「美脚タイヤくん」です。もうちょっとで世にでる予定です笑


    /* アニメさせる画像 */
var anmObj = $(".hogeImg");//アニメさせたい画像を指定
/* 1フレームの幅 */
var frameWidth = 82;//1コマの幅を指定
/* フレームの総数 */
var frameCount = 15;//コマ数を指定
    /* スピード */
var speed = 100;//値が少なければ早くなります

    //--設定はここまで--//

var maxPos = (frameCount-1)*-frameWidth
var pos;

/*画像を包みます*/
anmObj.wrap("

");
$(".jqAnm").width(frameWidth);

$(".anm").click(function(){
/* フレームアニメスタート! */
setInterval(function(){
pos = anmObj.css("margin-left");
if(pos==maxPos+"px"){
anmObj.css({"margin-left":"0"});
}else{
anmObj.css({"margin-left":"-="+frameWidth+"px"});
}
},speed);

こんな感じです。
特に難しいことはやっていないので簡易的にやりたい場合のみご活用くださいませ!