js三维圆周运动
前面我们介绍了二维圆周运动，如果是三维圆周运动，则需要考虑x、y、z立体坐标轴。
从示意图中可知，三维圆周运动的模拟实现实际上是元素的宽高发生了变化，元素的x轴变化依然按照三角函数公式进行，元素的y轴一直保存为0
假设圆的宽(或高)在z轴正方向最远处时为100px，当z轴值为0时，宽(或高)为50px，在z轴负方向最远处时为0px
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { margin-top: 100px; } </style> </head> <body> <button id="btn1">开始旋转</button> <button id="btn2">暂停</button> <button id="reset">还原</button> <div id="result"></div> <div id="test" style="height: 100px;width: 100px;background-color:pink;position:relative;left:200px;top:60px;border-radius:50%"></div> <script> reset.onclick = function(){ history.go(); } btn1.onclick = function(){ threeCircleMove({ obj:test,r:200,x0:test.x0,width:test.width,height:test.height,a:test.a,num:test.num }) } btn2.onclick = function(){ clearInterval(test.timer); test.timer = 0; } function getCSS(obj,style){ if(window.getComputedStyle){ return getComputedStyle(obj)[style]; } return obj.currentStyle[style]; } function threeCircleMove(json){ //要操作的元素 var obj = json.obj; //方向(顺时针'+'或逆时针'-') var dir = json.dir; dir = dir || '+'; //最大圈数 var max = json.max; max = Number(max) || 'all'; //半径 var r = json.r; r = Number(r) || 100; //圆心x轴坐标 var x0 = json.x0 || parseFloat(getCSS(obj,'left')); //元素的初始宽高 var offsetHeight = obj.offsetHeight; var offsetWidth = obj.offsetWidth; //元素的宽高 var height,width; //初始夹角，以角度为单位 var a0 = json.a0; a0 = Number(a) || 90; //当前夹角 var a = json.a ||a0; //当前圈数 var num = json.num || 0; //清除定时器 if(obj.timer){return;} //声明当前值cur var cur = {}; obj.timer = setInterval(function(){ //将这些瞬时值储存在obj对象中的属性中 obj.a = a; obj.x0 = x0; obj.width = width; obj.height = height; obj.x = x; obj.num = num; //如果元素运动到指定圈数则停止定时器 if(num == max){ clearInterval(obj.timer); } //顺时针 if(dir == '+'){ a++; if(a == a0 + 360){ a = a0; num++; } //逆时针 }else{ a--; if(a == a0 - 360){ a = a0; num++; } } //更新当前值 cur.left = parseFloat(getCSS(obj,'left')); //更新left值和宽高值 var x = x0 + r*Math.cos((90 + a*Math.PI)/180); width = (offsetWidth/2) + offsetWidth/2*Math.sin((90 + a*Math.PI)/180); height = (offsetHeight/2) + offsetWidth/2*Math.sin((90 + a*Math.PI)/180); test.style.left = x + 'px'; test.style.width = width + 'px'; test.style.height = height + 'px'; },20); } </script> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知