JS运动效果的碰壁运动之投掷碰壁

时间：5年前阅读：6300

投掷碰壁：如果一个物体向空中投掷出去，会呈现一个抛物线的效果，最终经过与地面碰撞多次后停止

投掷碰撞效果是x轴和y轴的合效果。x轴做匀速运动，当物体碰到地面后，x轴速度发生损耗；y轴做匀加速运动，当物体碰到地面后，y轴速度同样发生损耗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
<body>
<div id="test" style="height: 50px;width: 50px;background:lightblue;position:absolute;top:200px;left:20px;border-radius:50%;"></div>
<button id="btn1">开始运动</button>
<button id="btn2">还原</button>
<script>
document.onmousedown = function(){
    return false;
}
btn1.onclick = function(){
    collisionMove({
        obj:test
    })
}
btn2.onclick = function(){
    history.go();
}
function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}  
function collisionMove(json){
    var obj = json.obj;
    var fn = json.fn;
    //声明y轴的当前值
    var curY = parseFloat(getCSS(obj,'top'));
    //声明offset高
    var offsetHeight = obj.offsetHeight;
    //声明元素活动区域高
    var activeHeight = json.activeHeight;
    //元素获取区域宽高默认值为可视区域高
    activeHeight = Number(activeHeight) || document.documentElement.clientHeight;
    //声明x、y轴的步长值
    var stepY = -50;
    var stepX = 10;
    //声明top、left样式值
    var top;
    var left;
    //声明减速系数
    var k = 0.8;
    //声明碰撞次数
    var i = 0;
    //清除定时器
    if(obj.timer){return;}
     //开启定时器
    obj.timer = setInterval(function(){
        //获取x、y轴的当前值
        curX = parseFloat(getCSS(obj,'left'));
        curY = parseFloat(getCSS(obj,'top'));
        //更新步长值stepY
        stepY+= 5;
        //更新top、left值
        top = curY + stepY;
        left = curX + stepX;
        //下侧碰壁前一刻，步长大于剩余距离，且元素向下运动时
        if(top > activeHeight - offsetHeight){
            top = activeHeight - offsetHeight;
        }
        obj.style.top = top + 'px';
        obj.style.left = left + 'px';
        //下侧碰撞瞬间，改变运动方向，并产生速度损耗
        if(top == activeHeight - offsetHeight){
            //若碰撞10次后，则停止运动
            i++;
            if(i== 10){
                clearInterval(obj.timer)
                obj.timer = 0;
                fn && fn.call(obj);
            }
            //速度损耗
            stepY = -stepY * k;
            stepX = stepX * k;
        }
    },20);            
}
</script>    
</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

JS运动效果的碰壁运动之投掷碰壁

网友评论