单击时的Javascript精灵旋转动画

我试图弄清楚如何使用javascript中的精灵表创建旋转图像效果。我想做的是：

两个按钮：

左按钮：向左旋转15帧。 右键：向右旋转15帧

我意识到有一些jquery插件可以让我轻松地做到这一点，但我想从头开始尝试。除了一般的想法，我不知道从哪里着手。任何提示都将不胜感激

看看这个

---

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

如果您需要一个插件来实际旋转图像

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>

var imgWidth=240；
var imgHeight=296；
var-ximages=6；
var-yimages=5；
var currentRow=0；
var currentColumn=0；
函数MoveSprite（dir）{
if（dir==“左”）{
当前列--；
如果（当前列<0）
{
currentColumn=ximages-1；
如果（currentRow==0）{
currentRow=yimages-1；
}
否则{
当前行--；
}
}   
}
否则{
currentColumn++；
if（currentColumn==ximages）{
currentColumn=0；
if（currentRow==yimages-1）{
currentRow=0；
}
否则{
currentRow++；
}
}
}
$（“#txtRow”）.val（当前行）；
$（“#txtColumn”）.val（currentColumn）；
$（“#spritesheet”）.css（“背景位置”、-imgWidth*currentColumn+“px”+-imgHeight*currentRow+“px”）；
}

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>

#雪碧片{
高度：296px；
宽度：240px；
背景图片：url（'walking_spritesheet.png'）；
}

样本精灵（1440x1480）： 你可以试试

• css3（轮换）ex:
• 画布（javascript）示例：
• svg（dom或其他LIB）例如：

---

如果您熟悉flash中的MovieClip，那么我制作了一个库，为您提供了类似的javascript界面

如果所有图像都在一个文件中，则可能需要查看CSS精灵（背景图像定位技巧），然后设置背景图像位置更改的动画。我知道您希望从头开始，但这可能会有所帮助：。