Question

我有一个精灵动画，一个使用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);

这就是我的意思，我的意思是因为图像宽度是100px而且我需要将背景位置移动100px以将大炮向右移动一度，因为360图像总计* 100px = 36000px。所以拼接的精灵就像是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。我的问题是我不知道如何正确到达“新目标背景位置”，然后根据当前背景位置动画++或 - ：

Answer 1

嗯，这是一个包含10张图片的简化工作示例。

我现在会发布代码和 jsFiddle ，我可能会在稍后回来深入介绍它。但基本上您只需正确排序图像，然后使用(Segments - Math.floor(degree / (360 / segments)))选择细分。您可能需要调整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

Answer 2

请记住，你从atan获得的度数将开始指向零度并从那里顺时针方向（-90向上，90向下）。

图像的每个位置应对应于特定角度。一旦你测量了度数（看起来你有那个部分），使用某种类型的映射将度数转换为正确的图像偏移。我不知道你的图像是什么样的，所以我无法帮助你。假设您的图像开始指向右侧，并从那里顺时针转动，度数将直接对应右图像的偏移量。（我建议你安排这样的框架以方便......）

旋转精灵javascript

2 个答案:

的 Working jsFiddle example

的 Working jsFiddle example