JS运动效果的碰壁运动之投掷碰壁
投掷碰壁：如果一个物体向空中投掷出去，会呈现一个抛物线的效果，最终经过与地面碰撞多次后停止
投掷碰撞效果是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/post/7055.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
