js三维圆周运动

时间：5年前阅读：6482

前面我们介绍了二维圆周运动，如果是三维圆周运动，则需要考虑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,我们将及时处理。

微信扫码关注

更新实时通知

js三维圆周运动

网友评论