Javascript спрайт анимация вращения на клик - PullRequest
Новая
       35

Javascript спрайт анимация вращения на клик

3 голосов
/ 24 мая 2011

Я пытаюсь выяснить, как создать эффект вращающегося изображения, используя лист спрайта в javascript.Что я пытаюсь сделать:

Две кнопки:

Левая кнопка: повернуть 15 кадров влево.Правая кнопка: поверните 15 кадров вправо.

Я понимаю, что существуют плагины jquery, которые позволили бы мне легко это сделать, но я хочу попробовать это с нуля.Помимо общей идеи, я не знаю, куда двигаться дальше.Любые советы будут с благодарностью.

Ответы [ 3 ]

7 голосов
/ 24 мая 2011

Проверьте это jsFiddle, чтобы увидеть рабочий пример

На основании вашего вопроса кажется, что вы пытаетесь научиться анимировать спрайт, а не вращатьсяодно изображение.Если так, вот как вы бы оживили спрайт.Примечание: здесь используется изображение бегущего человека.В вашем вопросе вы спрашивали об эффекте вращающегося изображения.В любом случае вы просто смотрите на другой фрагмент спрайта, и тогда анимация зависит исключительно от спрайта.Пока ваш спрайт отображает вращающееся изображение, изображение будет вращаться.

Если вам нужен плагин для фактического поворота изображения, см. Здесь .

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): enter image description here

1 голос
/ 17 июня 2013

Если вы знакомы с MovieClip во флэш-памяти, я создал библиотеку, которая предоставляет вам аналогичный интерфейс в javascript. https://github.com/wolthers/SpriteClip.js

0 голосов
/ 24 мая 2011

вы можете попробовать

...