单击Javascript精灵旋转动画

Question

我试图找出如何使用javascript中的精灵表创建旋转图像效果.我正在做的事情:

两个按钮:

左键:向左旋转15帧.右键:向右旋转15帧.

我意识到有jquery插件可以让我轻松地做到这一点,但我想从头开始尝试.除了一般的想法,我不知道从哪里开始.任何提示将非常感谢.

Answer 1

看看这个jsFiddle看一个有效的例子

根据您的问题,听起来您正在尝试学习如何为精灵设置动画而不是实际旋转单个图像.如果是这样,这里是你如何动画精灵.注意:这使用了一个人跑的图像.在您的问题中,您询问了旋转图像效果.在任何一种情况下,您只是查看精灵的不同切片,然后动画完全依赖于精灵.只要您的精灵显示旋转图像,图像就会显示为旋转.

如果您需要插件来实际旋转图像,请参阅此处.

JavaScript的

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script> 
<script type="text/javascript">
var imgWidth = 240;
var imgHeight = 296;
var ximages = 6;
var yimages = 5;
var currentRow = 0;
var currentColumn = 0;

function MoveSprite(dir) { 
    if (dir == "left") {
        currentColumn--;
        if (currentColumn < 0)
        {
            currentColumn = ximages -1;
            if (currentRow == 0) {
                currentRow = yimages - 1;
            }
            else {
                currentRow--;
            }
        }   
    }
    else {
        currentColumn++;
        if (currentColumn == ximages) {
            currentColumn = 0;
            if (currentRow == yimages - 1) {
                currentRow = 0;
            }
            else {
                currentRow++;
            }
        }
    }
    $("#txtRow").val(currentRow);
    $("#txtColumn").val(currentColumn);
    $("#spritesheet").css("backgroundPosition", -imgWidth * currentColumn + "px " + -imgHeight * currentRow + "px"); 
}
</script>

HTML

<button onclick="MoveSprite('left');return false;">Move Left</button><button onclick="MoveSprite('right');return false;">Move Right</button>
<div id="spritesheet"></div>

CSS

<style type="text/css">
#spritesheet {
    height: 296px;
    width:240px;
    background-image:url('walking_spritesheet.png');
}
</style>

样品雪碧 (1440x1480):