Javascript 精靈旋轉 animation 點擊

Question

我試圖弄清楚如何使用 javascript 中的精靈表創建旋轉圖像效果。 我正在嘗試做的事情：

兩個按鈕：

左鍵：向左旋轉 15 幀。 右按鈕：向右旋轉 15 幀。

我意識到有 jquery 插件可以讓我輕松做到這一點，但我想從頭開始嘗試。 除了一般的想法，我不知道從哪里開始。 任何提示將非常感謝。

Answer 1

查看這個jsFiddle 以查看一個工作示例

---

根據您的問題，聽起來您正在嘗試學習如何為精靈設置動畫而不是實際旋轉單個圖像。 如果是這樣，這是您將如何為精靈設置動畫。 注意：這使用了一個男人跑步的圖像。 在您的問題中，您詢問了旋轉圖像效果。 在任何一種情況下，您都只是查看精靈的不同切片，然后 animation 完全依賴於精靈。 只要您的精靈顯示旋轉圖像，圖像就會出現旋轉。

如果您需要插件來實際旋轉圖像，請參見此處。

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

你可以試試

• css3（旋轉） 例如： http://antimatter15.com/misc/rotatedgooglecss3.html
• canvas (javascript) 例如： https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
• svg (dom or other libs) ex: http://www.svgbasics.com/rotate.html , http://raphaeljs.com/reference.html