Вращать спрайт javascript - PullRequest
Новая
       31

Вращать спрайт javascript

4 голосов
/ 04 октября 2010

У меня есть спрайт-анимация, небольшая пушка, визуализированная с помощью 3D-приложения. У меня ровно 360 кадров для поворота на 360 градусов. Каждое изображение имеет размер 100x100 пикселей.

Итак, в основном я пытаюсь сделать следующее: когда я нажимаю в любом месте страницы, ствол пушки должен вращаться, чтобы указывать на курсор мыши, возможно, это звучит просто, но я не могу заставить его работать очень хорошо, возможно, из-за недостатка моих математических навыков: P

То, что у меня сейчас есть, выглядит примерно так 

/* This is my div with the cannon background image (360 images stitched into one) each  "image area" is 100x100px */

obj.cannon = $('#cannon');

/* Get the X/Y of the cannon loc in the dom */
var cannonX = $(obj.cannon).offset().left;
var cannonY = $(obj.cannon).offset().top;

/* Get radians using atan2 */
var radians = Math.atan2(e.pageY-cannonY, e.pageX-cannonX);

/* Convert to degrees */
var degrees = radians * (180/Math.PI);

И вот где я нахожусь, я имею в виду, поскольку ширина изображения составляет 100 пикселей, и мне нужно переместить положение фона на 100 пикселей, чтобы сместить пушку на один градус вправо, потому что 360 изображений * 100 пикселей = 36000 пикселей в целом. Таким образом, сшитый спрайт имеет ширину 36000 пикселей.

Итак

Вставьте здесь странные вычисления, основанные на текущем backgroundPosition изображения-спрайта, и примените новое backgroundPosition в зависимости от того, где вы щелкнули курсором мыши, затем используйте своего рода setTimeout (animateIt, speed); "анимировать" фоновую позицию на новую позицию. 

function animateIt(){
  if(newpos!=targetpos) { //Use < > here if we need to add or remove
      newpos+=100; //Until we arrive at the new backgroundPosition
      $(obj.cannon).css({backgroundPosition: newpos+'px' });
      setTimeout(animateIt, speed);
  }
}

Я здесь на правильном пути, правильно ли я думаю об этом? Я чувствую себя глупо, это должно быть просто, но сейчас у меня выпадение мозга, я думаю = P. Моя проблема в том, что я не знаю, как правильно получить «новую целевую фоновую позицию», а затем анимировать ее ++ или - на основе текущей фоновой позиции: /

Ответы [ 2 ]

4 голосов
/ 04 октября 2010

Хорошо, вот упрощенный рабочий пример с 10 изображениями.

Я выложу код и jsFiddle сейчас, и я мог бы вернуться позже кпокрыть это в глубину.Но в основном вы просто упорядочиваете свои изображения правильно, а затем выбираете сегмент, используя (Segments - Math.floor(degree / (360 / segments))).Возможно, вам придется настроить 0 градусов.Например, я сделал 0 равным тому, что было бы нормальным, на 90.

Обратите внимание на то, что координаты экрана, x и y, увеличиваются вправо и вниз .Это заставляет градусы atan работать по часовой стрелке вместо обычного против часовой стрелки в системах координат, где x и y увеличиваются вправо и up .

Я добавил в некоторый текстовый вывод, который показывает градусыи показанный сегмент изображения.

jQuery прекрасно справляется с нормализацией положения x и y.Просто позаботьтесь, чтобы ваши настройки CSS были кросс-браузерными.

Пример работы jsFiddle

Вот наше изображение: alt text

Вот наш HTML: 

<div id="main"><div id="img"></div></div>
<div id="info">
    <span></span><br/>
    <span></span>
</div>

CSS: 

div#main {
    width:500px;
    height:500px;
    border:2px #000 solid; }
div#img {
    width:94px;
    height:119px;
    overflow:hidden;
    top:50%;
    left:50%;
    margin-left:-45px;
    margin-top:-60px;
    position:relative; 
    background-image:url('http://imgur.com/3UPki.png');
    background-position:0;}
div#info {
    position: absolute;
    bottom:0;
    left:0; }

Javascript / jQuery: 

$(function() {
    var position = $("div#img").position(), 
        mouseX, mouseY, imgX, imgY, degree;
    imgX = position.left;
    imgY = position.top;
    $("#main").mousemove(function(e) {
          // degree is arctan y over x (soh,cah,toa)
        degree = Math.atan2((e.pageY - imgY),(e.pageX - imgX))*(180 / Math.PI);
        degree = (degree - 90) % 360;
          // jQuery normalizes pageX and pageY
          // transfrom from -180 to 180 ==> 0 to 360
        if (degree < 0) degree = 180 + (180 - (Math.abs(degree)));        
        rotate(degree);
        $("span:first").html("Segment: " + (9 - Math.floor(degree / 36)));
        $("span:last").html("Degree: " + Math.floor(degree));          
    }); 

    function rotate(degree) {
        var off = 9 - Math.floor(degree / 36);
        $("div#img").css("background-position",-off*94);
    }    
}); ​

Рабочий пример jsFiddle

0 голосов
/ 04 октября 2010

Имейте в виду, что градусы, которые вы получаете из atan, начнут указывать вправо на ноль градусов и оттуда по часовой стрелке (-90 вверх, 90 вниз).

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

...