我正在尝试弄清楚如何使用 javascript 中的 sprite 表创建旋转图像效果。我正在尝试做什么:
两个按钮:
向左按钮:向左旋转 15 帧。 右键:向右旋转 15 帧。
我知道有一些 jquery 插件可以让我轻松地做到这一点,但我想从头开始尝试。除了一般的想法,我不知道从哪里开始。任何提示将非常感谢。
最佳答案
看看这个 jsFiddle to see a working example
根据您的问题,听起来您正在尝试学习如何为 Sprite 制作动画而不是实际旋转单个图像。如果是这样,这就是您如何为 Sprite 设置动画。注意:这使用了一个正在奔跑的人的图像。在您的问题中,您询问了旋转图像效果。在任何一种情况下,您都只是在查看 Sprite 的不同切片,然后动画完全取决于 Sprite 。只要您的 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>
样本 Sprite (1440x1480):
关于单击时的Javascript Sprite 旋转动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6102715/