旋转精灵javascript

2019-06-26 23:22:12 阅读：203 来源： 互联网

标签：jquery javascript rotation sprite css-sprites

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

标签：jquery,javascript,rotation,sprite,css-sprites
来源： https://codeday.me/bug/20190626/1298649.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

旋转精灵javascript