播放序列帧动画图片

playSpritsAni.js

/**
 * 播放序列帧图片
 * @param  {string} elementId         元素id
 * @param  {number} playTime          播放时间/ms
 * @param  {number} totalSpriteHeight 序列帧图片高度/px
 * @param  {number} startFrame        播放开始帧数(0为空白帧)
 * @param  {number} endFrame          播放结束帧数(总帧数+1为空白帧)
 * @return {null}                   没有返回值
 */
function playSpriteAni(elementId, playTime, totalSpriteHeight, startFrame, endFrame) {
    var element = document.getElementById(elementId),
    spriteHeight = element.clientHeight,
    startFrame = (startFrame == 0) || startFrame ? startFrame: 1,
    endFrame = endFrame? endFrame: (totalSpriteHeight/spriteHeight),
    playRate = playTime / (endFrame - startFrame);

    var curFrame = startFrame;
    var transY = -(startFrame-1) * spriteHeight;
    var endtransY = -(endFrame-1) * spriteHeight;

    var sprites = setInterval(function() {
        curFrame++;
        transY -= spriteHeight;

        element.style.backgroundPosition = "0 "+transY+"px";

        if (curFrame == endFrame || document.body.className == 'end') {
            element.style.backgroundPosition = "0 "+ endtransY +"px";
            clearInterval(sprites);
        }

    }, playRate);
}