前面我们介绍了二维圆周运动，如果是三维圆周运动，则需要考虑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/post/7044.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知