点击Javascript精灵旋转动画

Question

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

两个按钮：

左键：旋转15帧到左。 右键：向右旋转15帧。

我意识到有jquery插件可以让我轻松做到这一点，但我想尝试从头开始。除了总体思路之外，我不知道该怎么办。任何提示将非常感谢。

Answer 1

看看这个jsFiddle to see a working example

---

根据您的问题，这听起来像你想学习如何制作动画精灵并没有真正旋转单个图像。如果是这样，这里是你将如何动画一个精灵。注意：这使用一个男人跑步的图像。在你的问题中，你问了一个旋转的图像效果。在任何一种情况下，您都只是在查看精灵的不同部分，然后动画完全依赖于精灵。只要你的精灵显示一个旋转的图像，那么图像就会旋转。

如果你需要一个插件来实际旋转图像，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

你可以尝试

• CSS3（旋转）例如：http://antimatter15.com/misc/rotatedgooglecss3.html
• 帆布（JavaScript的）例如：https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
• SVG（DOM或其​​他库）例如：http://www.svgbasics.com/rotate.html,http://raphaeljs.com/reference.html

Answer 3

如果您熟悉MovieClip在闪光灯中，我制作了一个图书馆，在JavaScript中为您提供了类似的界面。 https://github.com/wolthers/SpriteClip.js