单击时的Javascript精灵旋转动画

Question

我想知道如何在javascript中使用精灵工作表来创建旋转图像效果。我想要做的是：

两个按钮：

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

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

Answer 1

查看此jsFiddle to see a working example

根据你的问题，你听起来像是在学习如何制作一个精灵的动画，而不是真正地旋转一张图片。如果是这样，下面是如何设置精灵动画的。注意:这使用了一个正在奔跑的人的图像。在你的问题中，你问到了旋转图像效果。在任何一种情况下，您只需查看精灵的不同切片，然后动画就完全依赖于精灵。只要你的sprite显示一个旋转的图像，那么图像就会显示为旋转。

如果你需要一个插件来实际旋转图像，see here。

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)：

​

Answer 2

如果你熟悉flash中的MovieClip，我做了一个库，它在javascript中提供了类似的界面。https://github.com/wolthers/SpriteClip.js

Answer 3

你可以试一试

javascript

• css3 (旋转) ex：http://antimatter15.com/misc/rotatedgooglecss3.html
• canvas (javascript) ex：https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
• svg (dom或其他库) ex：http://www.svgbasics.com/rotate.html，javascript