旋转精灵 javascript
我有一个精灵动画，一个使用 3D 应用程序渲染的小加农炮。我正好有 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。所以缝合的精灵大约是 36000px 宽。
因此，
根据图像精灵的当前背景位置在此处插入奇怪的计算，并根据鼠标光标单击的位置应用新的背景位置，然后使用某种 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。我的问题是我不知道如何正确到达“新目标背景位置”，然后根据当前背景位置对其进行动画处理 ++ 或 -- ：/
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.
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);
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.
So
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);
}
}
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 :/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
嗯，这是一个包含 10 张图像的简化工作示例。
我现在会发布代码和jsFiddle，我可能会稍后回来深度覆盖它。但基本上，您只需正确排序图像，然后使用
(Segments - Math.floor( Degree / (360 / snippets)))选择片段。您可能需要调整0度数。例如，我将0设置为等于90的正常值。请注意屏幕坐标 x 和 y 向右和向下增加。这使得
atan的度数在 x 和 y 向右和向上增加的坐标系中按顺时针方向工作，而不是通常的逆时针方向。我添加了一些文本输出，显示所显示的度数和图像片段。
jQuery 可以很好地处理 x 和 y 位置的标准化。请注意您的 CSS 设置是跨浏览器的。
工作 jsFiddle 示例
这是我们的图片：
这是我们的 HTML：
CSS：
Javascript / jQuery：
工作 jsFiddle 示例
Well, here is a simplified working example with 10 images.
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 your0degree. For example, I made my0equal to what would normal by90.Pay attention to the fact that the screen coordinates, x and y, increase right and down. This makes the degrees of
atanwork 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 handles normalizing the x and y position nicely. Just take care that your CSS setup is cross browser.
Working jsFiddle example
Here's our image:
Here's our HTML:
CSS:
Javascript / jQuery:
Working jsFiddle example
请记住，从 atan 获得的度数将从零度开始向右指向，并从那里顺时针旋转（-90 向上，90 向下）。
图像的每个位置都应对应于特定的角度。一旦测量了度数（看起来该部分是正确的），请使用某种类型的映射将度数转换为正确的图像偏移。我不知道你的头像是什么样子，所以我无能为力。假设您的图像开始指向右侧，并从那里开始顺时针旋转，则度数将直接对应于右侧图像的偏移量。 （为了方便起见，我建议你这样安排框架......）
Keep in mind that the degrees you get from atan will start pointing right for zero degrees and go clockwise from there (-90 is up, 90 is down).
Each position of your image should correspond to a specific angle. Once you have the degrees measured (it looks like you have that part right), use some type of mapping to translate your degrees to the proper image offset. I don't know what your image looks like so I can't help with that. Assuming your image starts pointing right, and goes around clockwise from there, the degrees will correspond directly the the offset for the right image. (I suggest you arrange your frames like this for ease...)