我有一个精灵动画,一个使用3D应用程序渲染的小炮.我有360度转向的360帧.每张图片的像素大小为100×100.

所以基本上我正在尝试todo是当我点击页面中的任何地方时,大炮的桶需要旋转指向鼠标光标,声音简单可能但我不能真正让它工作得很好,也许是因为我的数学技能缺乏：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);

这就是我的意思,我的意思是因为图像宽度是100px而且我需要将背景位置移动100px以将大炮向右移动一度,因为360图像总计* 100px = 36000px.所以拼接的精灵就像是36000px宽.

所以

根据图像精灵的当前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.我的问题是我不知道如何正确到达“新目标背景位置”,然后根据当前背景位置设置动画或 – ：

解决方法:

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

我现在将发布代码和jsFiddle,我可能会稍后回来深入介绍它.但基本上你只是正确地订购你的图像,然后你通过使用(Segments – Math.floor(度/(360 /段))来选择片段.您可能需要调整0度.例如,我使我的0等于90的正常值.

注意屏幕坐标x和y向右和向下增加的事实.这使得atan度在顺时针方向上顺时针工作而不是通常的逆时针方向,其中x和y向右和向上增加.

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

jQuery很好地处理了x和y位置的规范化.只需注意您的CSS设置是跨浏览器.

Working jsFiddle example

这是我们的形象：

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

Working jsFiddle example