點擊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