旋转精灵Javascript [英] Rotate sprite javascript

问题描述

我有一个精灵动画，一个使用3D应用程序渲染的小炮.我在360度转弯时有360帧.每张图片的像素均为100x100.

I have a sprite animation, a small cannon rendered using a 3D app. I have exactly 360 frames for a 360 degree turn. Each image has a 100x100 pixel size.

所以基本上我想做的是，当我单击页面中的任何地方时，大炮的枪管需要旋转以指向鼠标光标，听起来很简单，但我真的无法使其正常工作，也许是因为我缺乏数学技能:P

So basically what I am trying todo is when I click anywhere in the page, the barrel of the cannon needs to rotate to point at the mouse cursor, sound simple maybe but I can't really get it to work very well, perhaps cause my math skills is lacking :P

我目前拥有的是这样的东西

What I currently have is something like this

/* 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);

这就是我的意思，因为图像宽度为100px，并且我需要将背景位置移动100px才能将加农炮向右移动1度，因为总共有360张图像* 100px = 36000px.因此，拼接后的Sprite宽度约为36000px.

And this is where I am, I mean since the image width is 100px and I need to move the background-position by 100px to move the cannon one degree right, because 360 images * 100px = 36000px in total. So the stitched sprite is like 36000px wide.

所以

在此基于图像精灵的当前backgroundPosition插入怪异的计算，并根据您用鼠标光标单击的位置应用新的backgroundPosition，然后使用某种setTimeout(animateIt，speed);将背景位置动画化"到新位置.

Insert weird calculation here based on the current backgroundPosition of the image-sprite and apply new backgroundPosition based on where you click with the mouse cursor, then use some sort of setTimeout(animateIt, speed); to "animate" the background position to the new position.

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.我的问题是我不知道如何正确到达新目标背景位置"，然后根据当前背景位置对其进行++或-动画处理:/

Am I at all on the right track here, am I thinking correctly about this? I feel stupid, this should be a simple thing but right now I am having a brain meltdown I think =P. My problem is I don't know how to properly arrive at the "new target backgroundposition" and then animate it ++ or -- based on the current background position :/

推荐答案

这是一个包含10张图像的简化工作示例.

Well, here is a simplified working example with 10 images.

我现在将发布代码并 jsFiddle ，我可能会稍后再回来进行深入介绍.但基本上，您只是正确地订购了图像，然后使用(Segments - Math.floor(degree / (360 / segments)))来选择细分.您可能需要调整您的0度.例如，我使0等于90的正常水平.

I'll post the code and jsFiddle now, and I might come back later to cover it in depth. But basically you just order your images correctly, and then you pick the segment by using (Segments - Math.floor(degree / (360 / segments))). You may have to adjust your 0 degree. For example, I made my 0 equal to what would normal by 90.

请注意以下事实:屏幕坐标x和y向右增加并向下.这使得atan的度数是顺时针工作的，而不是x和y分别向右和上递增的坐标系中通常的逆时针方向.

Pay attention to the fact that the screen coordinates, x and y, increase right and down. This makes the degrees of atan work clockwise instead of the usual counter clockwise in coordinate systems where x and y increase right and up.

我在一些文本输出中添加了显示度数和图像片段的显示.

I added in some text output that shows the degrees and image segment being shown.

jQuery很好地处理了x和y位置.请注意，您的CSS设置是跨浏览器.

jQuery handles normalizing the x and y position nicely. Just take care that your CSS setup is cross browser.

这是我们的形象:

这是我们的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);
    }    
}); ​

这篇关于旋转精灵Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！